Webdesco Newsletter

Sponsored Links

While creating a recent form for a customer I decided I wanted the ‘other’ input box to be hidden unless the visitor selected ‘other’ from a drop dowl list, in which case the input box would appear allowing them to type in the information.  This approach makes for a clean looking form that degrades nicely if javascript is turned off, as the ‘normal’ state for the ‘other’ boxes is not hidden.

Lets look at the html first

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8? />
<title>show-hide input based on selection box example</title>
<style type=”text/css”>
<!–
.hideRow {
display: none;
}
–>
</style>

</head>

<body>
<form action=”" id=”test”>
<label for=”pickUp”>Pick up location :</label><select name=”pickUp” id=”pickUp” onchange=”showhide(’pickUp’, ‘Other’, ‘PUother’);” >
<option>- Please choose -</option>
<option>Aéroport : Genève</option>
<option>Aéroport : Grenoble (St Geoirs)</option>
<option>Aéroport : Lyon (St Exupéry)</option>
<option>Aéroport : Milan (Malpensa)</option>
<option>Aéroport : Nice</option>
<option>Other</option>
</select>

<div id=”PUother” class=”">
<label for=”pickUpOther” id=”lpickUpOther” class=”normalcolor” >Other :</label><input name=”pickUpOther” type=”text” class=”textfield”  id=”pickUpOther” value=”" />
</div>

</form>
</body>
</html>

Looks pretty standard? well it is there are only three additional things that you’d need to add to an existing form; surround the input you want to show/hide with a DIV and give the div an id and a class=”"

Next create a css class called hideRow with the attributes display:none;

Finally add an onchange event to the selection box which will call the javascript.

onchange=”showhide(’pickUp’, ‘Other’, ‘PUother’);”

The onchange event calls a function called showhide which has three parameters, firs is the id of the select input box, the second is the value you want to use to trigger the show/hide, and the third is the id of the div you want to show/hide.

So now lets take a look at the script

<script type=”text/javascript”>
//<![CDATA[
function showhide(which,why,what) {
var selObj = document.getElementById(which);
var selIndex = selObj.selectedIndex;
var tag = selObj.options[selIndex].text;
if (tag == why) {
document.getElementById(what).className=”;
}else{
document.getElementById(what).className=’hideRow’;
}
}
showhide(”pickUp”, “<?PHP echo $txt_other; ?>”, “PUother”);

//]]>
</script>

As you can see, the values that we have passed to the javascript from the onchange event have been called which, why and what.  I won’t go too much into each line of code, but in summary, the first three lines retrieves the current text (i.e. the textual part of the input, not the value), we then compare it to ‘why’ and if they are the same we show the row, else we give the div element a class name of ‘hideRow’.

One thing that I found, that I did not like with other javascripts out there was that if you did a refresh of the screen, the input value would not change (i.e. the browser remembers that you selected ‘other’) however since there was no trigger by the onchange event handler, the ‘other’ box would be hidden.  To overcome this we will call the function upon page load and to ensure that the form has loaded first, we MUST HAVE the javascript code located BELOW the form html.

The complete code is below, I hope this is of some use to you.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8? />
<title>show-hide input based on selection box example</title>
<style type=”text/css”>
<!–
.hideRow {
display: none;
}
–>
</style>
</head>

<body>
<form action=”" id=”test”>
<label for=”pickUp”>Pick up location :</label><select name=”pickUp” id=”pickUp” onchange=”showhide(’pickUp’, ‘Other’, ‘PUother’);” >
<option>- Please choose -</option>
<option>Aéroport : Genève</option>
<option>Aéroport : Grenoble (St Geoirs)</option>
<option>Aéroport : Lyon (St Exupéry)</option>
<option>Aéroport : Milan (Malpensa)</option>
<option>Aéroport : Nice</option>
<option>Other</option>
</select>

<div id=”PUother” class=”">
<label for=”pickUpOther” id=”lpickUpOther” class=”normalcolor” >Other :</label><input name=”pickUpOther” type=”text” class=”textfield”  id=”pickUpOther” value=”" />
</div>

</form>
<script type=”text/javascript”>
//<![CDATA[
function showhide(which,why,what) {
var selObj = document.getElementById(which);
var selIndex = selObj.selectedIndex;
var tag = selObj.options[selIndex].text;
if (tag == why) {
document.getElementById(what).className=”;
}else{
document.getElementById(what).className=’hideRow’;
}
}
showhide(”pickUp”, “<?PHP echo $txt_other; ?>”, “PUother”);
//]]>
</script>

</body>
</html>