Forms: Showing extra fields if a <select> option is chosen

[gary@castus]

Hi,

I would like to create a new piece of functionality, where I have a <select> list, and if someone choose options 2, 3, 4 or 5 more fields will appear underneath. This is used as part of a cart made in PHP, so I might have to save the fields if a page refresh is needed, but I was thinking I could do it with some DOM scripting (JS) and CSS, hiding the fields until needed.

I can't find an appropriate tutorial on this though. Anyone know of one?

Thanks

[Tailslide]

Here you go - this was meant for if someone chose "other" from the options in a select box dropdown then another input box appears but I'm sure you can tweak it to do what you want:

JS:

<script type="text/javascript">

function showTextBox(ddbox) {
   if ( ddbox.options[ddbox.selectedIndex].value == "other" ) {
      document.getElementById("tbox").style.display = "block";
   } else {
      document.getElementById("tbox").style.display = "none";
   }
}

</script>

Relevant bit of form:

<label for="ddbox">Title:</label><br /><select name="ddbox" id="ddbox" onchange="showTextBox(this)">
			<option value="mr">Mr</option>
			<option value="mrs">Mrs</option>
			<option value="ms">Ms</option>
			<option value="other">Other</option>
			</select><br />
<div id="tbox"><label for="other">Other:</label><br /><input type="text" size="48" maxlength="40" name="other" id="other" /><br /></div>
<label for="firstname">First Name:</label><br/><input type="text" size="48" maxlength="40" name="First Name" id="firstname" /><br />
<label for="lastname">Last Name:</label><br /><input type="text" size="48" maxlength="40" name="Last Name" id="lastname" /><br />
<label for="phone">Phone Number:</label><br /><input type="text" size="48" maxlength="40" name="Phone" id="phone" /><br /><br />
<input class="submit" type="submit" value="Submit this form" />

[gary@castus]

Thanks..looks simple enough! I owe you one.

I think I'll use !== "field" as I need to show the hidden fields for all but one option.

Thanks again.

[Tailslide]

Oops - forgot to remove the style="display:none" from the tbox div - (removed it now!) that way with JS off you get all fields visible.