Hide / Display field in form using drop down.

[metalaniac]

Hi there

I am searching for a method of displaying an extra form field, only when a certain option is selected in a drop down box.

[HTML]
<label for="staff_status">Status: </label>
<select id="staff_status" tabindex="7">
<option value="active" selected="selected">Active</option>
<option value="pending">Pending</option>
<option value="terminated">Terminated</option>
</select>
[/HTML]

All I want is when the option "terminated" is selected, another input field needs to be appear below the drop-down box. Like so:

[HTML]
<label for="staff_enddate">End Date: </label>
<input type="text" id="staff_enddate" value="dd/mm/yyyy" />
[/HTML]

And that is it. Would appreciate any help.

Regards
Joe

[acoder]

Call a function onchange which has the following code:

// assuming val is the value of the selected option:
if (val == "terminated") {
    document.getElementById("staff_enddate").style.display = "block";
}