Displaying a From Field Depending on Previous Question using jQuery
So to an example:
This form contains a very simple form asking for a title, select Mr, Mrs, Miss… and noting happens we move on. If you select other from the drop-down another field should appear underneath allowing you to enter an alternative title e.g. Prof.
<form action="" method="post">
<legend>Display Field Depending on Previous Question</legend><br />
<label for ="yourTitle">Title</label>
<select id="yourTitle" name="yourTitle" title="Title">
<!—hide unless option value ‘other’ is selected in previous question—>
<p id="otherTitle"><label for "otherTitle">Other Title</label>
<input type="text" id="otherTitle" name="otherTitle" title="Other Title">
<input name="submit" type="submit" id="submit" value="Submit"/>
Now we add code between the header tags:
// If option Other is selected for institution type, show text field for Other
var val = $(this).val();
You can modify the example for your own needs, you will need to alter the elements ID’s in the example code to fit your own fields. You don’t have to use a text field, you could use another drop-down box or any other form element you like.
This article was posted on 07/01/11 in Code, jQuery
We love .net magazine (known as "Practical Web Design" outside the UK) and have teamed up with Future Publishing to get our readers up to a massive 36% off a years subscription.
What you have had to say about all this...
Perfect thanks… just what I needed :D- Shane Murphy
That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.