使用 jQuery 和 cookie 的条件表单答案

【问题标题】：Conditional form using jQuery and cookies使用 jQuery 和 cookie 的条件表单
【发布时间】：2011-04-25 09:28:22
【问题描述】：

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

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

我想存储用户所做的选择，以便在重新加载页面后自动显示正确的表单。 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 上犯了一些类似的问题，但我想不通。

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

【问题讨论】：

标签： jquery html forms cookies conditional

【解决方案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 中，我将 <div>s 设置为 display:none;。

【讨论】：