Сохранение jQuery показать/скрыть состояние при отправке формы

Я пытаюсь отобразить блок HTML, используя jQuery, если установлен флажок. Все работает нормально, пока я не отправлю форму (она отображает ошибки формы на основе правил на стороне сервера)Сохранение jQuery показать/скрыть состояние при отправке формы

Но при просмотре страницы блок HTML снова скрыт.

Как сохранить состояние блока HTML в 'show' при отправке формы?

Я использую следующее:

$(document).ready(function(){ 
    //Hide div w/id extra 
    $(".test").css("display","none"); 

    // Add onclick handler to checkbox w/id checkme 
    $("#yes").click(function(){ 

    // If checked 
    if ($("#yes").is(":checked")) 
    { 
     //show the hidden div 
     $(".test").show("fast"); 
    } 
    else 
    { 
     //otherwise, hide it 
     $(".test").hide("fast"); 
    } 
    }); 

});

источник

2010-11-22 terrid25

Что вы могли бы сделать:

Добавить скрытый ввод в вашу форму. Измените его значение при проверке/снятии отметки.

Когда страница обновляется через submit, проверьте значение скрытого поля (через $ _POST или $ _GET) и добавьте атрибут checked = "checked", если необходимо.

Флажок должен быть проверен, а HTML должен быть виден.

Вот что-то работает для меня

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
</head> 
<body> 
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post"> 
<input type="hidden" id="verifyCheckbox" name="verifyCheckbox" <?php 
    if(isset($_POST['verifyCheckbox']) && $_POST['verifyCheckbox'] == "true") 
    { 
    echo 'value="true"'; 
    } 
?>/> 
<input type="checkbox" id="yes" 
<?php 
    if(isset($_POST['verifyCheckbox']) && $_POST['verifyCheckbox'] == "true") 
    { 
    echo 'checked="checked"'; 
    } 
?> /> 
<input type="submit" /> 
</form> 
<div class="test"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a facilisis risus. Nam quis sapien turpis, non porttitor ante. In vulputate arcu non diam porttitor vulputate. Aenean leo est, adipiscing a egestas ut, dapibus sit amet purus. Quisque pellentesque mi ac orci placerat congue. Nulla sodales mollis arcu sed viverra. Integer id metus turpis. Vivamus interdum convallis sagittis. Quisque quis tellus ante, a consequat eros. Donec tincidunt luctus dolor. Nulla pulvinar, odio et consectetur dictum, mauris massa vulputate magna, et pretium mauris tortor vel nibh. Donec quis tortor lacus, sed fringilla dui. Duis diam nulla, faucibus vel malesuada quis, auctor nec lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam iaculis tristique mauris vitae facilisis. Nulla facilisi. Nulla non nisl id lacus laoreet auctor sit amet non tellus. Vestibulum quis nibh sed ligula tempor scelerisque. Nunc pretium dapibus convallis. Proin pulvinar, tellus vitae imperdiet rhoncus, elit justo scelerisque libero, nec iaculis lacus turpis ut est.</p> 
</div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    //Hide div w/id extra 
    $(".test").css("display","none"); 

    // Add onclick handler to checkbox w/id checkme 
    $("#yes").click(function(){ 

    // If checked 
    if ($("#yes").is(":checked")) 
    { 
     //show the hidden div 
    $("#verifyCheckbox").val("true"); 
     $(".test").show("fast"); 
    } 
    else 
    { 
     //otherwise, hide it 
    $("#verifyCheckbox").val("false"); 
     $(".test").hide("fast"); 
    } 
    }); 

    <?php 
    if(isset($_POST['verifyCheckbox']) && $_POST['verifyCheckbox'] == "true") 
    { 
    echo '$(".test").show();'; 
    } 
?> 

}); 
</script> 
</body> 
</html>

источник

2010-11-22 11:06:44 Flipke

Можете ли вы привести пример? – terrid25

Конечно, я отредактирую его сразу – Flipke

Изменен код выше и работает шарм! – terrid25

Try запускающего щелчок после связывания события щелчка

$(document).ready(function(){ 
    $(".test").css("display","none"); 

    $("#yes").click(function(){ 
    if ($("#yes").is(":checked")) 
    { 
     //show the hidden div 
     $(".test").show("fast"); 
    } 
    else 
    { 
     //otherwise, hide it 
     $(".test").hide("fast"); 
    } 
    }); 
    $("#yes").click(); 
});

EDIT: форматирование

источник

2010-11-22 11:04:00

Это, кажется, работает нормально, часть из моего флажок установлен по умолчанию. Таким образом, div не отображается, пока я не сниму и не перепроверяю поле – terrid25

. Мне также нужно расширить это, чтобы использовать несколько флажков, показывать/отображать другие – terrid25

Это звучит, как вы обновите страницу когда вы отправляете форму (например, классическое представление формы). Если это так, у вас есть три варианта:

Установите cookie, когда пользователь нажмет флажок, который устанавливает настройку флажка; когда ваша страница загружается, используйте JavaScript, чтобы проверить файл cookie и показать/скрыть блок HTML, если это необходимо.
У формы есть флаг для отметки галочки (возможно, через скрытый элемент ввода или вы можете добавить что-то к действию формы), и на странице, отображаемой после отправки формы, по умолчанию блок HTML показывает или спрятать в зависимости от ситуации (с помощью атрибута styledisplay: none для скрытых).
Не используйте классическую форму представления, если у вашего пользователя есть JavaScript, вместо этого используйте Ajax.

Возможно, это в наибольшей степени повлияло на ваш текущий код.

источник

2010-11-22 11:04:42

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

источник

2010-11-22 11:04:46 Thariama

Сохранение jQuery показать/скрыть состояние при отправке формы

ответ

Смежные вопросы