Site icon StartFunction

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.

Overview

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:

[html]
<div id="requestinfo">
<h2>Request Information</h2>
<form action="" id="info">
<p>
<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>
<select id="design">
<option value="interfaces">Interfaces</option>
<option value="interior">Web</option>
<option value="graphic">Graphic</option>
</select>
<select id="development">
<option value="jquery">jQuery</option>
<option value="wordpress">WordPress</option>
<option value="magento">Magento</option>
</select>
<select id="wpbranch">
<option value="themes">Themes</option>
<option value="plugins">Plugins</option>
</select>
<select id="other">
<option value="illustration">Illustration</option>
<option value="icon">Icon Sets</option>
<option value="fonts">Custom Fonts</option>
</select>
<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" />
</p>
</form>
</div>
[/html]

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:

[css]
#design,
#development,
#other,
#wpbranch{
display: none;
}
[/css]

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:

[js]
$("#requesttype").change(function(){
switch($(this).val()){
case "design":
$("#design").slideDown("fast");
$("#requestinfo select:not(#requesttype, #design)").hide();
break;
case "development":
$("#development").slideDown("fast");

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

});
[/js]

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.

Exit mobile version