Conditional form using jQuery and cookies

Question

Hi everybody!

I've got two different forms on my website: one for submitting a general inquiry and another one to order stuff. By clicking a radio button the user can choose the form he/she needs.

I created the form in a content management system which checks if the textfield-data is entered correctly after submitting the form. If the system detects an error the page is reloaded and the form appears again displaying an error message.

I would like to store the selection the user did to automatically show the correct form after the page has been reloaded. A tutorial on Onextrapixel explains something similar and I was trying to modify it according to my needs. The following code shows the script I am using. I tried to .hide() or .show() the specific content according to which radio button is clicked. Hiding the right content works without any problem if I disable the cookie stuff.

$(document).ready(function () {
    $("#parent2").css("display", "none");
    $("#parent3").css("display", "none");

    $(".aboveage2").click(function () {
        if ($('input[name=age2]:checked').val() == "anfrage") {
            $("#parent3").hide();
            $("#parent2").slideDown("fast");
            $.cookie('auswahl_radio', 'radio_allgemein');
        } else {
            $("#parent2").hide();
            $("#parent3").slideDown("fast");
            $.cookie('auswahl_radio', 'radio_rezept');
        }
    });

    var auswahl_radio = $.cookie('auswahl_radio');

    if (auswahl_radio == 'radio_allgemein') {
        $("#parent3").hide();
        $("#parent2").show();
        $('#opt_29_0').attr('checked', 'checked');
    } else {
        $("#parent2").hide();
        $("#parent3").show();
        $('#opt_29_1').attr('checked', 'checked');
    }
});

The problem begins if I enable the Cookie plugin and I can't figure out what is wrong. Please bear with me, I am fairly new to jQuery.

Here is the most important HTML source code:

    <form action="kontakt.html" id="f3" method="post">
    <div id="ctrl_29" class="radio_container aboveage2">
        <input type="radio" name="age2" id="opt_29_0" class="radio" value="anfrage" />
        <label id="lbl_29_0" for="opt_29_0">radio1</label>

        <input type="radio" name="age2" id="opt_29_1" class="radio" value="rezept" />
        <label id="lbl_29_1" for="opt_29_1">radio2</label>
    </div>
</form>

<div id="parent2">
    <form action="kontakt.html" id="f1" method="post">
        <p>Name:</p> 
        <input type="text" name="Name" id="ctrl_1" class="text mandatory" value="" />
        <input type="submit" id="ctrl_99" class="submit" value="Absenden" /> 
    </form>
</div>

<div id="parent3">
    <form action="kontakt.html" id="f5" method="post">
        <p>E-Mail:</p> 
        <input type="text" name="Email" id="ctrl_56" class="text mandatory" value="" /><br />
        <input type="submit" id="ctrl_63" class="submit" value="Absenden" />
    </form>
</div>

I fould some similar questions here on Stack Overflow but I couldn't figure it out.

Any ideas would be great, thanks!

Answer 1

After some sleep I kinda figured it out. The whole code was not well sorted. Here's the code that works for me:

$(document).ready(function() {
    var auswahl_radio = $.cookie('auswahl_radio');

    if (auswahl_radio == 'radio_allgemein') {
        $("#form_allgemein").show();
        $('#opt_29_0').attr('checked', 'checked');
    } else if (auswahl_radio == 'radio_rezept') {
        $("#form_rezept").show();
        $('#opt_29_1').attr('checked', 'checked');
    } else {
        $("#form_allgemein").css("display","none");
        $("#form_rezept").css("display","none");
    }

    $(".kontakt_anliegen").click(function() {
        if ($('input[name=anliegen]:checked').val() == "anfrage" ) {
            $("#form_rezept").hide();
            $("#form_allgemein").slideDown("fast");
            $.cookie('auswahl_radio', 'radio_allgemein');
        } else {
            $("#form_allgemein").hide();
            $("#form_rezept").slideDown("fast");
            $.cookie('auswahl_radio', 'radio_rezept');
        }
    });
});

In my CSS I set the <div>s to display:none;.