Reveal extra form fields using a select box with jQuery

Sometimes we need to include a feedback form but without making it too obtrusive to the user so we only want to add options when he is actually using it. In this tutorial we’re going to learn how to reveal hidden fields in a form when an option in a select combo box is selected using jQuery, the JavaScript library.


Initially the form is in a reduced state showing only one drop down or select box. When you pull down the menu and select one of the options, another select component is revealed and so on. Even though we’re using a box, you can use other components such as a checkbox or radio butons to trigger the code and reveal in turn other form items such as extra input fields or additional textareas.

This is a small and simple thing to do, but it really improves user experience by avoiding clutter and only providing extra options when the user really needs them and only those that he wants to see.

Before we start going through the code, check the live demo.

Marking it Up

The code for the form is quite straightforward:

<div id="requestinfo">
<h2>Request Information</h2>
<form action="" id="info">
<select id="requesttype" name="requesttype">
<option value="none">My request is about…</option>
<option value="design">Design</option>
<option value="development">Development</option>
<option value="other">Other</option>
<select id="design">
<option value="interfaces">Interfaces</option>
<option value="interior">Web</option>
<option value="graphic">Graphic</option>
<select id="development">
<option value="jquery">jQuery</option>
<option value="wordpress">WordPress</option>
<option value="magento">Magento</option>
<select id="wpbranch">
<option value="themes">Themes</option>
<option value="plugins">Plugins</option>
<select id="other">
<option value="illustration">Illustration</option>
<option value="icon">Icon Sets</option>
<option value="fonts">Custom Fonts</option>
<input value="Name" type="text" id="name" name="name" />
<input value="E-Mail" type="text" id="email" name="email" />
<textarea cols="10" rows="10" id="message" name="message" >Enter your message here…</textarea>
<input value="Submit" type="submit" id="info-submit" name="submit" />

We simply place all select boxes in place and assign a proper id to each one.

Hiding things

Now let’s add some CSS to the mix, just the enough to stylize the fields and hide the select boxes that must not be shown in the beginning:

display: none;

The example contains a lot of other styles to make the forms look pretty and things from CSS3 such , drop-shadows, transitions, etc, but these are the essential ones.

Revealing the hidden boxes with jQuery

Now this is the important part, the JavaScript code, dependent on jQuery:

case "design":
$("#requestinfo select:not(#requesttype, #design)").hide();
case "development":

        $(&quot;#requestinfo select:not(#requesttype, #development)&quot;).hide();
    case &quot;other&quot;:
        $(&quot;#requestinfo select:not(#requesttype, #other)&quot;).hide();
    case &quot;none&quot;:
        $(&quot;#requestinfo select:not(#requesttype)&quot;).hide();


The event we will be using here is the change [?] event, that is triggered when a form element changes its value. In the case of select boxes, the value is changed when a new option is selected. When this happens, we check the value of the select box and reveal the proper select box using the slideDown effect from jQuery. If there was another select box visible, it is hidden.

This is just a small sample of what you could do: you could even have a single select box and reveal different contact forms or any other things depending on the current value of the select box. It could even act as an effective replacement for a tabbed panel, since it won’t take too much horizontal space and you can have many different items and panels to reveal.

11 thoughts on “Reveal extra form fields using a select box with jQuery”

  1. brilliant stuff in here, and my next question is , what if one of our form field are required to fill ? is there any effect with this? thanks

  2. I have spent 2 hours setting this up not because I’m stupid, but because I’m php coding advanced stuff, so I have to make a small edit, and then save and refresh every 30 seconds or less.

    Your post saved me loads of time so I’m thanking you for it.

  3. So, if I wanted to ultimately show a list of information contained in a div after all selections are made, how would I code that?

    For example, if Design is selected and then Magento is selected, underneath the selection boxes a list of articles would be displayed rel

  4. Tabetha, if user doesn’t have the chance to change previous selections, you could simply store the previous selections and when the user selects the last item execute the event callback passing the selections list as an argument.
    If, on the other hand, the user can change previous selections, you could either use the callback triggered for the event after any selection (passing default argument for selections that have not been made yet) or add a “Run!” button to check all the current selections and perform something based on them.

  5. I have been looking EVERYWHERE for some guidance on how to implement something like this. I never even thought to use a switch! Works great modified for text fields as well. I can’t thank you enough!

  6. How would you make this work with a text area. In other words using your sample above lets say I want a new text field appear after the user has typed something into the “Name” field.

  7. I am trying to create a form that has 5 options to select from so far so good.

    My problem is when they choose option 5 I want a text area to open so that it can be filled.

    For example

    Spry Validation Select or Radio Group has the following options

    1 GC Airport

    2 Brisbane Domestic

    3 Brisbane International

    4 Brisbane Cruise Terminal

    5 Other Address

    If options 1, 2 or 3 are chosen I need another text field called flight to appear and this be filled by the user if option 5 other address is selected I want another text area to appear so that an address can be added.

    My problem I don’t know where to start or how to achieve the result.

    Thank You for any help you can provide.

    I am using Dreamweaver CS5.5

  8. Stop being noobish Tony. All you have to do is give whatever form fields you want an id # selector, and then update the jquery code by adding new lines and changing the selectors round, to what you want.

  9. can you give the download file for this example…. it will be very helpfull.
    Thanks in advance

  10. can you give the download file for this example…. it will be very helpfull.
    Thanks in advance

  11. I am using this to show div sections instead of select boxes, and they do show up, problem is it isnt making the switch so when you select something else the previous DIV is not hiding… any ideas why this might happen?

Leave a Reply