CODEWITHSUNDEEP
javascriptjquery
user791187
user791187

Reputation: 717

Display different results based on radio button selection

I'm using a piece of JQuery to create the effect described at this website:

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

What I need is to be able to display a different div based on the radio button selection. I have been able to successfully implement what has been demonstrated on the site...however I can only do that for one selection. I figure repeating the code, say 5 times, for 5 different divs would probably be really inefficient.
To keep things simple, I will probably name the divs the numbers 1-5. Thanks so much for your help!

<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><br />
<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
<input type="radio" name="age1" value="Maybe" class="aboveage1" /> Maybe
    </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>

Current Code:

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

Upvotes: 1

Views: 1501

Answers (1)

Guilherme David da Costa
Guilherme David da Costa

Reputation: 2368

If you want to slide down elements matching diferent answers to your aboveage and the divs have the same id as the answers values, you can do the following:

Note: You will have to rename your divs that correspond to the answers from formset to sub-formset in order to work.

$(document).ready(function() { 
    $('ol.sub-formset').css("display","none"); // display none on all ol that doesn't have formset class
    $('input[class^="aboveage"]').click(function() { 
        $('ol[class!="formset"]').slideUp("fast"); //Slide Up Effect 
        $('#' + $(this).val()).slideDown("fast"); //Slide Down Effect 
    });
});

Working example: http://jsfiddle.net/L5qfn/

Upvotes: 1

Related Questions