jQuery

Conditional form using jQuery


During a website development a simple form like product enquiry may require a conditional form. Probably to select the list of items based on the product type. This tuto will teach you how to create conditional forms with the of jQuery magic. It is very simple and easy to use.

What is the magic here?

Without any suspense and too much gyan i’ll tell you the secret. Its .change() event handler from jQuery. This event is triggered when the value of an element changes. But this event is limited to input elements, textarea boxes and select elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

Our example

Lets see the .change() function in action to understand better with an example. In our example we have the following html code inside a form tag.

<p>
    <label>What is your gender?</label>
    <input class="gender" type="radio" name="gender" value="Male" />Male
    <input class="gender" type="radio" name="gender" value="Female" />Female
</p>

Note that in the above code I have used a common class called ‘gender’. This class will be used as the selector in jQuery to check for the change in value of the element and then display the corresponding content. Now on selection of Male option a set of questions have to appear while when the other option is selected another set of questions have to be shown.

These set of questions are stored in jquery variable like below.

$male = "<div class='sub-questions option_one'> \
            <h4>Male - Kindly check the things that you do?</h4> \
            <p><input type='checkbox' />Read Newspaper</p> \
            <p><input type='checkbox' />Play Games</p> \
            <p><input type='checkbox' />Own playing consoles</p> \
            <p><input type='checkbox' />Drive motorcycles</p> \
            <p><input type='checkbox' />Drive car</p> \
        </div>"
;
       
$female = "<div class='sub-questions option_one'> \
            <h4>Female - Kindly check the things that you do?</h4> \
            <p><input type='checkbox' />Shopping</p> \
            <p><input type='checkbox' />Read Books</p> \
            <p><input type='checkbox' />Hangout</p> \
            <p><input type='checkbox' />Drive bikes</p> \
            <p><input type='checkbox' />Drive car</p> \
        </div>"
;

I have stored these html code as variables in jquery so that while switching between questions we can remove the unused code from the HTML DOM structure. If male option is selected we can remove the female questions and vice versa. This way while submitting only the values of the displayed set of questions are sent via POST method.

The Magic

Now for the real action. We will use ‘.gender’ as the selector and bind the .change() event to it. Let’s take a look the code.

$('.gender').change(function(){
    //Do something when the event is triggered.
});

Now jquery will trigger the .change() event every time the value of ‘gender’ class changes. Then with the help of an easy if else statement we can insert and remove the new set of questions.

$('.gender').change(function(){
    if($(this).val() == "Male"){
        $('.option_one').remove();
        $(this).parent().after($male);
    } else if($(this).val() == "Female"){
        $('.option_one').remove();
        $(this).parent().after($female);
    }
});

Every time the value is changed we select the questions (in this case with the help of class ‘.option_one’) and remove it. And then insert the new set of questions. This way we can add and remove the new set of questions every time the options are changed.

This tutorial has just shown you the fundamentals of a conditional form. Using this logic we can start framing any kind of complex conditional form. But there are other methods too with its pros and cons

Hide & Display Method

Instead of storing the questions as variables in jquery you can use this method. In this method the set of questions will be hidden using CSS until either of the option is chosen. Once the option is chosen using .show() and .hide() handlers from jquery we can toggle the visibility of the content. But this method poses a problem. Because the set of questions are still present in the DOM structure (though hidden or not) while submitting the form its values are also sent along via POST method along with the other values. Later while getting the POST information using server side language we can do another if else check and get the values.

<?php
    if($POST[gender] == 'Male') {
        //GET values from MALE related questions set
    } elseif($POST[gender] == 'Female') {
        //GET values from FEMALE related questions set
    }
?>
Pros:

If javascript is disabled the form will still work as everything is in the DOM structure and will be submitted. (But again if javascript is disabled the whole toggling of visibility between questions wont work too.)

Cons:

You have to perform another if else statement on the server side.

Hope this tutorial gives yof a perspective on the power of .cange() event handler and how it can be used. Have fun developing.

Latest Comments

Leave a Reply

comment on this article