How To Display Form Fields Based On Selection With Or Without jQuery Cookie | Onextrapixel - Showcasing Web Treats Without Hitch

Description

Over these years, adding JavaScript to a form has become very common. The introduction of JavaScript has changed the way in which a user interacts with an online form. It will no longer be just a normal static form for a user to fill in as the whole interaction becomes more responsive. Instant feedback could also be achieved when a user enters invalid information for certain field or according to a certain criteria that the user input, the form will show or hide additional fields.

In fact, most of the people do not like filling up long forms, even if you include fields that are optional, the form can still be overwhelming. In order to enhance the user experience, we can add in JavaScript to hide away fields that are not necessary for normal users. If under certain condition, the user will then need to fill up the additional fields.

Let me show you an example on how to display additional fields based on selected radio button option below.

jQuery Slide Up/Down Form Section Base On Select Radio Button Option

Let's create a simple HTML Markup for the form.

//Example 1: Display Fields Based On Selected Radio Button <fieldset> <ol class="formset"> <li><label for="fname1">First Name: </label> <input type="text" id="fname1" value="" name="fname1"/></li> <li><label for="lname1">Last Name: </label> <input type="text" id="lname1" value="" name="lname1"/></li> <li><label for="email1">Email Address: </label> <input type="text" id="email1" value="" name="email1" /></li> <li><label for="age1">Are you above 21 yrs old?</label> <input type="radio" name="age1" value="Yes" class="aboveage1" /> Yes <input type="radio" name="age1" value="No" class="aboveage1" /> No</li> </ol> <ol id="parent1" class="formset"> <li><strong>Parent/Guardian Information:</strong></li> <li><label for="pname1">Parent Name: </label> <input type="text" id="pname1" value="" name="pname1"/></li> <li><label for="contact1">Contact No.: </label> <input type="text" id="contact1" value="" name="contact1"/></li> </ol> <input type="submit" name="submit" value="Submit" class="submitbtn" /> </fieldset>

Now, let's add in the jQuery.

$(document).ready(function(){ $("#parent1").css("display","none"); $(".aboveage1").click(function(){ if ($('input[name=age1]:checked').val() == "No" ) { $("#parent1").slideDown("fast"); //Slide ...

Original URL

http://www.onextrapixel.com/2009/10/13/how-to-display-form-fields-based-on-selection-with-or-without-jquery-cookie/

http://www.onextrapixel.com/2009/10/13/how-to-display-form-fields-based-on-selection-with-or-without-jquery-cookie/