How to show a form field ONLY if another is selected in JavaScript or jQuery?
- by Sam
I have a form, like so:
<form action="" method="post">
<select name="pageType">
<option value="main">Main Page</option>
<option value="sub">Sub Page</option>
<option value="sub-sub">Sub-Sub Page</option>
</select>
<br />
<label>Choose Sub Sub Name:</label> <input type="text" name="sub-sub-name" />
<br />
<input type="submit" name="submit" value="GO!" />
</form>
What I would like to achive is for this text field (and it's label):
<label>Choose Sub Sub Name:</label> <input type="text" name="sub-sub-name" />
to only appear if the 3rd option (sub sub page) is selected from the drop down and not show up otherwise. How can this be done with either javascript or the jquery framework?
EDIT
by the way, it would be nice if this can be achieved without the page needing to refresh and losing previously submitted form data. I know form data can still be kept using variables that store the values even on page refresh, but I was hoping for that effect that I see on a lot of sites where the additional text area (or other form element) just appears without page refresh.
