Блог

Главная - Вопросы по программированию - Предварительная проверка флажка при передаче данных между формами с использованием Javascript

Предварительная проверка флажка при передаче данных между формами с использованием Javascript

#javascript

#javascript

Вопрос:

Я работаю над HTML-формой, используя Javascript для передачи данных между страницами, и по большей части мне это удается, за исключением флажков. Можно ли убедиться, что флажки остаются установленными при переходе на следующую страницу? или лучше поставить флажки на 2-й странице, где будет представлена фактическая информация? Спасибо!

Комментарии:

1. Сохраните состояние флажка localStorage , затем, когда загрузится новая страница, обновите все флажки на основе того, что вы сохранили.

2. используете ли вы метод POST или GET ? хм, я думаю, что можно убедиться, что флажки остаются включенными при переходе на следующую страницу, и это лучше. можете ли вы опубликовать некоторый код htm и javascript ?

3. Как вы «используете javascript для передачи данных между страницами»? Где код?

Ответ №1:

Это пример использования sessionStorage для сохранения состояния флажков. Состояние флажков сохраняется, даже если вы перезагружаете страницу.

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script>
      function loadOldValues(){
        checkboxes = document.querySelectorAll("input[type=checkbox]")
        for(var i = 0; i < checkboxes.length;   i){
          if(sessionStorage.getItem(checkboxes[i].id) == "true"){
            checkboxes[i].checked = true
          }
        }
      }
      function saveOldValues(){
        checkboxes = document.querySelectorAll("input[type=checkbox]")
        for(var i = 0; i < checkboxes.length;   i){
          checkboxes[i].addEventListener("change", function(){
            sessionStorage.setItem(this.id, this.checked)
          })
        }
      }
      addEventListener("load", loadOldValues)
      addEventListener("load", saveOldValues)
    </script>
  </head>
  <body>
    <form>
      Form:<br>
      <label for="checkbox1">Check 1:</label>
      <input type="checkbox" id="checkbox1"><br>
      <label for="checkbox2">Check 2:</label>
      <input type="checkbox" id="checkbox2"><br>
    </form>
  </body>
</html>

Подробнее о хранении вы можете узнать здесь: http://www.html5rocks.com/en/features/storage

Метки: