Displaying a From Field Depending on Previous Question using jQuery

Sometimes forms on websites can look daunting to users when there are lots of fields to fill out. A neat solution is to hide fields that are only required depending on a previous answer. In the example I have created suppose you have a form with a drop-down list of peoples titles we have all the usual titles included but what if a Professor filled out the form? We add another fields to the form for 'other' that only needs filling out if the correct title was not available in our drop-down. 99% of people filling out the form will not need to use this field so with a little bit if Javascript magic we can hide the field unless a user selects 'other' from the drop-down. This approach gives us much neater form for users who have Javascript enabled and will degrade nicely for those few who don't.

I decided to do this using jQuery instead of straight Javascript (not using a library) as it is now almost a standard way of doing things. Also this example with forms may find jQuery being used to deal with form validation and so forth.

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.

Display Field Depending on Previous Question

Title —Select— Mr Mrs Miss Ms Dr Other

Other Title

The code is shown below. Note that you will need to include the jQuery javascript file in your header before the script will work. We start with our new form markup:

<form action="" method="post">
  <fieldset>
    <legend>Display Field Depending on Previous Question</legend><br />
    <p>
    <label for ="yourTitle">Title</label>
    <select id="yourTitle" name="yourTitle" title="Title">
      <option value="">—Select—</option>
      <option value="mr">Mr</option>
      <option value="mrs">Mrs</option>
      <option value="miss">Miss</option>
      <option value="ms">Ms</option>
      <option value="dr">Dr</option>
      <option value="other">Other</option>
    </select>
  </p>
  <!—hide unless option value ‘other’ is selected in previous question—>
  <p id="otherTitle"><label for "otherTitle">Other Title</label>
    <br />
      <input type="text" id="otherTitle" name="otherTitle" title="Other Title">
    </p>
  </fieldset> 
  <p>
    <input name="submit" type="submit" id="submit" value="Submit"/>
  </p>
</form>

Now we add code between the header tags:

<script type="text/javascript">
$(document).ready(function(){
    $("#otherTitle").hide();
    $("#otherTitle input").attr("disabled","disabled");

    // If option Other is selected for institution type, show text field for Other
    $("#yourTitle").change(function() {
      var val = $(this).val();
      $("#otherTitle input").attr("disabled",(val=="other")?"":"disabled");
    (val=="other")?$("#otherTitle").show():$("#otherTitle").hide()
    });
});
</script>

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 7 January 2011 in Code, jQuery

What you have had to say about all this...

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.