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

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

1 голос
/ 22 ноября 2010

Я пытаюсь отобразить блок HTML, используя 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");
    }
  });

});

Ответы [ 4 ]

2 голосов
/ 22 ноября 2010

Похоже, вы обновляете страницу при отправке формы (например, при отправке классической формы). Если это так, у вас есть три варианта:

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

  2. У формы есть флаг, указывающий, установлен ли флажок (возможно, с помощью скрытого элемента ввода, или вы можете добавить что-либо к действию формы), и чтобы страница, отображаемая после отправки формы, по умолчанию блокировала HTML отображение или скрытие в зависимости от ситуации (через атрибут style display: none для скрытого).

  3. Не используйте классическую отправку формы, если у вашего пользователя есть JavaScript, вместо этого используйте Ajax.

Это, вероятно, в порядке наименьшего влияния на наибольшее влияние на ваш текущий код.

1 голос
/ 22 ноября 2010

Попробуйте вызвать клик после привязки события клика 

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

РЕДАКТИРОВАТЬ: форматирование

0 голосов
/ 22 ноября 2010

Что вы можете сделать:

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

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

Флажок должен быть установлен, и 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>
0 голосов
/ 22 ноября 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...