Создание липкого JavaScript - PullRequest
Новая
       14

Создание липкого JavaScript

0 голосов
/ 19 января 2011

У меня есть форма javascript, в которой я использую innerHTML для установки текста.

Когда форма сообщает, что информация потеряна. В любом случае я могу сделать ее "липкой". Я думал, что печенье, но это все, что я знаю.

Спасибо 

<form "action="" name="myform">
<input type="text" name='name">
<div id="theName"></div>
</form>

Быстрый пример Я записываю имя и мне нужно, чтобы div отображал имя после отправки формы.

Ответы [ 3 ]

3 голосов
/ 19 января 2011

Вам нужно как-то сохранить данные. Есть несколько вариантов:

  • Храните его на сервере. Когда форма отправлена, ваш серверный скрипт получит данные; он может сохранить его в базе данных, в переменной сеанса или в другом хранилище, подходящем для вашего приложения. Всякий раз, когда клиент повторно посещает страницу с формой, пусть сервер сгенерирует HTML формы с сохраненными данными.
  • Использовать локальное хранилище HTML5 . Хотя они не поддерживаются в устаревших браузерах, все современные предоставляют API локального хранилища. Когда пользователь отправляет форму (присоединяет прослушиватель событий к событию «отправки» формы), вы можете сохранить данные формы, сделав вызов localStorage[key] = value и получив его с помощью localStorage[key].
  • Сохраните его в файле cookie. Хотя я не рекомендую такой подход, вы можете создать cookie с данными формы. Единственное ограничение - данные должны быть представлены в виде строки, но я рекомендую JSON . Однако вам, вероятно, не следует использовать этот подход, поскольку файлы cookie отправляются на сервер для каждого запроса; если поля формы содержат много данных, то вы также без необходимости отправляете много данных на сервер.

Использование локального хранилища HTML5 дает вам автономный подход, который не требует настройки на стороне сервера: 

<form action="" name="myform">
  <input type="text" name="name">
  <div id="theName"></div>
</form>
<script type="text/javascript">
  (function() {
    var form = document.getElementsByName('myform')[0];
    if (localStorage['name'] !== undefined) {
      var displayArea = document.getElementById('theName');
      displayArea.textContent = localStorage['name'];
    }
    form.addEventListener('submit', function() {
      var nameField = document.getElementsByName('name')[0];
      localStorage['name'] = nameField.value;
    }, false);
  })();
</script>
2 голосов
/ 19 января 2011

Вы устанавливаете атрибут «value» входных тегов на что-то или пустое?Вы можете просто удалить (удалить сам атрибут), чтобы последний набор значений использовался (верно только для входных данных, не относящихся к паролю. Кроме того, пробовал не во всех браузерах.).

Илиеще лучше, вы можете использовать серверный скрипт, такой как (PHP, ASP, RUBY и т. д.), чтобы установить значение атрибута для ранее отправленного. 

<form method="post">
<input type="text" name="txtinput" id="txtinput" value="<?php echo $_POST['txtinput']?>"/>
<input type="submit" value="submit">
</form>

делать это только в js намного сложнее и ненадежнее, так как вашсобираюсь использовать куки.

PS: Я предполагаю, что вы не используете XHR (AJAX) для отправки своих форм, поскольку XHR не обновляет страницы и не инициализирует вводные данные, если вы не сказали им.

0 голосов
/ 19 января 2011

Это должно происходить на стороне сервера. Javascript предназначен для улучшения страницы, он не зависит от манипулирования данными.

Ваш скрипт, преобразованный в PHP, будет выглядеть как 

<form action="" method="post" name="myform">
  <input type="text" name='name">
  <div id="theName"><?php
    if(isset($_POST['name'])) { echo $_POST['name']; }
  ?></div>
</form>

... и он будет работать каждый раз, не вызывая JS.

Вам все равно придется каким-то образом обрабатывать данные формы - как вы собирались получить данные без серверного скрипта?

...