Raffi wrote:
Hi folks,
I'm new to JavaScript and need some help.
I have a form with a select field. Depending on what is selected in
this field, I want to display or not display another select field. For
example first field asks the user if they drive, if the user selects
"NO" the form doesn't change. If they select "YES", another field
appears with different makes to chose from. If they change back to "NO"
the second field dissapears again.
Any help is appreciated.
Doing this can get a bit complex, because you have to ensure
that everything still works if javascript is disabled.
Therefore, you need to consider your page layout when writing
your JavaScript.
The script below ensures that all controls are available when
the page loads, even if JS is disabled. If it's enabled, the
fields to be hidden are included in the onload function (though
they could be in a function just after where they are added to
the page to stop them being displayed then hidden if the page
loads slowly).
The extra field and it's label are shown when "drive" is
selected. The hard part is determining how to show/hide the
label associated with the options. I've used a label and the
parentNode relationship to hide/show it. I've also disabled
hidden fields so they aren't submitted, but that's probably not
necessary.
You also have to deal with what happens when "reset" is clicked,
you may end up with "drive" not selected but the drive options
still displayed. Hence the reset onclick must call the
initForm() function to ensure the extra options are hidden.
If you want the hidden controls to take up zero space when
hidden, use style.display = 'none' and style.display=''
If you put the controls inside table elements (pretty common for
forms) you may want to hide/show the entire row containing the
label and option list, but then you'll have to use a different
method, either getElementById or go up the DOM from the option
until you find the parent TR, then hide it.
hideStuff() and showStuff() functions are designed to take as
many arguments as you like, so you can add several elements to
hide if you want.
You may also want to consider using a set of radio buttons
rather than option lists if there are only 4 or 5 options. It
saves clicks and users can see all the options without doing
anything (much preferred in my book). You can also attach the
hide/show stuff directly to the appropriate button rather than
having to find it using logic as is required of an option list.
Have fun with it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>demo</title>
<script type="text/javascript">
function showExtra(x,y) {
if (x[x.selectedIndex].value == 'drive') {
showStuff(y);
} else {
hideStuff(y);
}
}
function hideStuff() {
var n = arguments.length;
if (n > 0) {
for (var i=0; i<n; i++) {
if (arguments[i].style) {
arguments[i].style.visibility = 'hidden';
arguments[i].disabled = true;
if (arguments[i].parentNode.nodeName == 'LABEL') {
arguments[i].parentNode.style.visibility = 'hidden';
}
}
}
}
}
function showStuff() {
var n = arguments.length;
if (n > 0) {
for (var i=0; i<n; i++) {
if (arguments[i].style) {
arguments[i].style.visibility = 'visible';
arguments[i].disabled = false;
if (arguments[i].parentNode.nodeName == 'LABEL') {
arguments[i].parentNode.style.visibility = 'visible';
}
}
}
}
}
function initForm() {
hideStuff(document.forms['aForm'].elements['carType'])
}
</script>
</head>
<body onload="initForm();">
<form name="aForm" action="">
<label for="travelMode">Select a travel mode:
<select name="travelMode" onchange=
"showExtra(this,this.form.carType)">
<option value="walk">Walk</option>
<option value="cycle">Cycle</option>
<option value="drive">Drive</option>
</select></label>
<br>
<label for="carType">If your mode is "drive"<br>
select a vehicle type:
<select name="carType">
<option value="sedan">Sedan</option>
<option value="sedan">Wagon</option>
<option value="sedan">Commercial</option>
</select></label>
<br>
<input type="reset" value="Reset" onclick="initForm();">
<input type="submit" value="Submit">
</form>
</body>
</html>
--
Rob