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
Upload images for the first side of your card. Choose up to 10 different images or designs. We accept high resolution JPEG, PNG, GIF or PDF files. Free standard shipping is included.
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.