Условная форма с использованием jQuery и куки - PullRequest
Новая
       10

Условная форма с использованием jQuery и куки

1 голос
/ 14 октября 2010

На моем веб-сайте есть две разные формы: одна для отправки общего запроса, а другая для заказа вещей.Нажав переключатель, пользователь может выбрать нужную ему форму.

Я создал форму в системе управления контентом, которая проверяет, правильно ли введены данные текстового поля после отправки формы.Если система обнаруживает ошибку, страница перезагружается, и снова появляется форма с сообщением об ошибке.

Я хотел бы сохранить выбор, который пользователь сделал, чтобы автоматически отображать правильную форму после перезагрузки страницы.Учебное пособие по 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>

У меня есть несколько похожих вопросов по переполнению стека, но я не смогразберись.

Любые идеи были бы великолепны, спасибо!

1 Ответ

1 голос
/ 14 октября 2010

После некоторого сна я вроде понял это. Весь код был плохо отсортирован. Вот код, который работает для меня: 

$(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;.

...