/    Sign up×
Community /Pin to ProfileBookmark

form help

Copy linkTweet thisAlerts:
Feb 07.2007

Also posted this question in the php forum

Working on a form and i wanted to have a field pop up if a parent field was selected.
Example, If i select switch, I want fields IP, MAC and Serial to show.
Or if i select wap i want fields SSID MAC and IP to show.
I think i need to use javascript to do this
the way I have it working now is when you hit the submit button those fields show. I wanted this to happen the second the select field was selected.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@XeelFeb 08.2007 — use "onchange" event on select element and "element.options[i].selected" property in js to determine which option is selected. Then show/hide your related fields. Let me know if you have any problems doing that. ?



ex.

[CODE]for(i=0;i<selectEl.length;i++){
if(selectEl.options[i].selected){
//do something
fieldToShow.style.display="block";
fieldToHide.style.display="none";
}
}[/CODE]

Anyway you'd need to have all your data already in html before you aplly this algorythm, unless you want to make a dynamic data lists through access to a database which is much more complicated case including a hight level programming language like java or .NET.
Copy linkTweet thisAlerts:
@prophitauthorFeb 08.2007 — Xeel,

Here is what i have already. I had to cut out some parts but this will give you the idea.
<i>
</i>&lt;LINK REL="stylesheet" HREF="../../../inc/work.css" TYPE="text/css"&gt;
&lt;script language="javascript" type="text/javascript"&gt;
&lt;!--

function copy_clip(meintext){

<i> </i>if (window.clipboardData){
<i> </i> window.clipboardData.setData("Text", meintext);
<i> </i>}else if (window.netscape){
<i> </i> netscape.security.PrivilegeManager.enablePrivilege ('UniversalXPConnect');

<i> </i> var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard );
<i> </i> if (!clip) return;

<i> </i> var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
<i> </i> if (!trans) return;

<i> </i> trans.addDataFlavor('text/unicode');

<i> </i> var str = new Object();
<i> </i> var len = new Object();

<i> </i> var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
<i> </i> var copytext=meintext;
<i> </i> str.data=copytext;
<i> </i> trans.setTransferData("text/unicode",str,copytext.length*2);
<i> </i> var clipid=Components.interfaces.nsIClipboard;

<i> </i> if (!clip) return false;
<i> </i> clip.setData(trans,null,clipid.kGlobalClipboard);

<i> </i>}

<i> </i>return false;
}


var store = new Array();

store[0] = new Array(
'Please Choose A Model'
);

store[1] = new Array(
'VSG1200',
'ES2024',
'ES3024',
'ES3124',
'ES2008',
'B3000',
'B3000 w/ WDS',
'G1000',
'G1000 w/ WDS',
'G3000H',
'G3000H w/ WDS',
'VES-1012',
'Zyair B120',
'Zyair B122',
'Zyair G405',
'Zyxel POE10',
'Zyxel POE80'
);

store[2] = new Array(
'HSG' ,
'AG3000'
);

store[3] = new Array(
'AP700'
);

store[4] = new Array(
'A350',
'A350 w/ WDS',
'A350/Bridge',
'A350/Bridge w/ WDS'
);

store[5] = new Array(
'BCEG 5.5 dBi',
'BCEG 5.5 dBi w/ WDS',
'BCEG 9 dBi',
'BCEG 9 dBi w/ WDS',
'BCEG 14 dBi',
'BCEG 14 dBi w/ WDS'


);


function init()
{
optionTest = true;
lgth = document.forms[0].second.options.length - 1;
document.forms[0].second.options[lgth] = null;
if (document.forms[0].second.options[lgth]) optionTest = false;
}


function populate(sel) {
if(typeof(sel)=='undefined'){
sel = "";
}
f = document.equipment;
var list = store[f.make.selectedIndex];
f.model.options.length = 0;
for(i=0;i&lt;list.length;i++) {
f.model.options[i] = new Option(list[i],list[i]);
if (f.model.options[i].value == sel) {
f.model.options[i].selected = true;
}
}
}


// --&gt;
&lt;/script&gt;

&lt;div id="hd"&gt;Hardware Replacement&lt;/div&gt;
&lt;hr width="100%"&gt;&lt;br&gt;

If equipment needs to be replaced you would need to fill out the form below&lt;br&gt;
Also create a Hardware replacement ticket for the device that needs to be replaced&lt;br&gt;
&lt;br&gt;
&lt;br&gt;





&lt;form method="post" action="&lt;?php $_SERVER['PHP_SELF'] ?&gt;" name="equipment"&gt;
&lt;table border="0" id="hardware" width="80%"&gt;
&lt;tr&gt;
&lt;td width="30%"&gt;Reason for Replacement:&lt;/td&gt;
&lt;td&gt;&lt;input type="text" name="rfr" size="60" value="&lt;?php htmlspecialchars(stripslashes($rfr))?&gt;" &gt;&lt;/td&gt;
&lt;tr&gt;&lt;td width="30%"&gt;Make :&lt;/td&gt;&lt;td&gt;
&lt;select name="make" id="make" onchange="populate()"&gt;
&lt;?php
foreach(array('Please Choose A Model', 'Zyxel', 'Nomadix', 'Proxim', 'Ascendance', 'BCEG') as $opt)
{
$selected = ($opt == $mk) ? ' selected' : '';
echo "&lt;option value='$opt'$selected&gt;$opt&lt;/option&gt;n";
}
?&gt;
&lt;/SELECT&gt;
&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
&lt;td width="30%"&gt;Model :&lt;/td&gt;&lt;td&gt;
&lt;select name="model" value="&lt;?php htmlspecialchars(stripslashes($md)) ?&gt;"&gt;
&lt;option&gt;Please Select A Model&lt;/option&gt;
&lt;/SELECT&gt;

&lt;script language="javascript" type="text/javascript"&gt;
populate('&lt;?php print $_POST["model"]; ?&gt;');
&lt;/script&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;&lt;td width="30%"&gt;Serial Number:&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="sn" size="20" value="&lt;?php htmlspecialchars(stripslashes($sn))?&gt;"&gt;&lt;/tr&gt;&lt;/td&gt;
&lt;tr&gt;&lt;td width="30%"&gt;Mac Address:&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="mac" size="20" value="&lt;?php htmlspecialchars(stripslashes($ma))?&gt;"&gt;&lt;/tr&gt;&lt;/td&gt;
&lt;tr&gt;&lt;td width="30%"&gt;IP Address:&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="ipaddr" size="20" value="&lt;?php htmlspecialchars(stripslashes($ip))?&gt;"&gt;&lt;/tr&gt;&lt;/td&gt;
&lt;?php if($mk =='Nomadix') {
echo '&lt;tr&gt;&lt;td width="30%"&gt;Subnet Mask&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="sm" size="20" value="'. htmlspecialchars(stripslashes($sm)).'"&gt;&lt;/tr&gt;&lt;/td&gt;';
}
?&gt;
&lt;tr&gt;&lt;td width="30%"&gt;Property ID:&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="prop" size="7" value="&lt;?php htmlspecialchars(stripslashes($pp))?&gt;"&gt;&lt;/tr&gt;&lt;/td&gt;
&lt;tr&gt;&lt;td width="30%"&gt;Property Contact Name/Title: &lt;/td&gt;&lt;td&gt;&lt;input type="text" name="contact" size="20" value="&lt;?php htmlspecialchars(stripslashes($ct))?&gt;"&gt;&lt;/tr&gt;&lt;/td&gt;
&lt;tr&gt;&lt;td width="30%"&gt;Shipping:&lt;/td&gt;&lt;td&gt;
&lt;select name="ship" id="ship"&gt;
&lt;?php foreach(array('Method of Shipping', 'Ground', 'Next Day Air', 'Next Day Saturday', '2nd Day', '3 day') as $opt2)
{
$selected = ($opt2 == $sp) ? ' selected' : '';
echo "&lt;option value='$opt2'$selected&gt;$opt2&lt;/option&gt;n";
}
?&gt;
&lt;/SELECT&gt;&lt;/tr&gt;&lt;/td&gt;
&lt;tr&gt;&lt;td width="30%"&gt;Ticket#:&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="ticket" size="7" value="&lt;?php htmlspecialchars(stripslashes($tt))?&gt;"&gt;&lt;/tr&gt;&lt;/td&gt;
&lt;tr&gt;&lt;td width="30%"&gt;Comments:&lt;/td&gt;&lt;td&gt;
&lt;textarea name="status" rows="4" cols="40"&gt;&lt;?php htmlspecialchars(stripslashes($cm)) ?&gt;&lt;/textarea&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;&lt;br&gt;
&lt;input type="submit" name="submit" value="Submit Request"&gt;
&lt;/form&gt;
[code]
This is the part im working on now
[code]
&lt;?php if($mk =='Nomadix') {
echo '&lt;tr&gt;&lt;td width="30%"&gt;Subnet Mask&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="sm" size="20" value="'. htmlspecialchars(stripslashes($sm)).'"&gt;&lt;/tr&gt;&lt;/td&gt;';
}
?&gt;

Which works when i hit the submit button it will then show the form with that mac address field. But i would like for it to show after i select the make.
×

Success!

Help @prophit spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...