使用 jQuery 和 cookies 的条件表单

Question

我的网站上有两种不同的表格：一种用于提交一般查询，另一种用于订购东西。通过单击单选按钮，用户可以选择他/她需要的表单。

我在内容管理系统中创建了表单，该系统在提交表单后检查文本字段数据是否输入正确。如果系统检测到错误，则会重新加载页面，并且表单再次出现并显示错误消息。

我想存储用户所做的选择，以便在页面重新加载后自动显示正确的表单。关于 Onextrapixel 解释了类似的内容，我试图根据我的需要修改它。以下代码显示了我正在使用的脚本。我尝试根据单击的单选按钮来 .hide() 或 .show() 具体内容。如果我禁用 cookie，隐藏正确的内容就没有任何问题。

$(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');
    }
});

如果我启用 Cookie 插件，但我无法找出问题所在，问题就开始了。请耐心听我说，我对 jQuery 还很陌生。

这是最重要的 HTML 源代码：

    <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>

我在 Stack Overflow 上提出了一些类似的问题，但我无法弄清楚。

任何想法都会很棒，谢谢！

Answer 1

睡了一觉后我大概明白了。整个代码没有很好地排序。以下是适合我的代码：

$(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');
        }
    });
});

在 CSS 中，我将

设置为 display:none;。