VPF::Как сохранить данные формы? - Форум программистов

Sardar

Дата 13.5.2005, 19:57 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Иногда требуеться сохранить инфу введённую пользователем, затем после перезагрузки страницы восстановить все значения у формы. Например в почтовике это может быть поле с адресом. Или большая форма для забивки инфы в базу, после каждой посылки не заставлять пользователя заполнять введённые значения ранее по новой.

Лучше всего это сделать на сервере! Но в редких случаях(в почтовике...) можно сохранить "сессию" у юзера в куках. У метода есть ограничения:

юзер должен иметь поддержку кук
юзер должен иметь поддержку скриптов
размер всех данных не может превышать 4кб

Другими словами применяем если точно знаем что юзер сидит под нормальным популярным браузером (Мозилла, ИЕ, Опера, Нетскейп...) и сохранять большие введённые текста не требуеться.

Код:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Form Session</title>
</head>

<body>

<script type="text/javascript">
<!--
/**
* Сохраняем форму. Функция принимает ссылку на форму. Форма должна иметь
* уникальный аттрибут ID.
*/
function saveFormSession(form) {
  if(!form||!form.id||!/^[^;=]+$/.test(form.id)) return;
  var data="", tok, el, safe_name;
  for(var i=0; i<form.elements.length; i++) {
    if((el=form.elements[i]).name==""||el.getAttribute("skip_form_save")!=null) continue;
    safe_name=el.name.replace(/([)\\])/g, "\\$1");
    switch(el.type) {
      case "text":
      case "textarea": tok="v("+safe_name+"):"+el.value.replace(/([|\\])/g, "\\$1")+"||"; break;
      case "radio":
      case "checkbox": tok="s("+safe_name+"):"+(el.checked? "1": "0")+"||"; break;
      case "select-one": tok="i("+safe_name+"):"+(el.selectedIndex)+"||"; break;
      default: tok="";
    }
    data+=tok;
  }
  if(data>=4000) return alert("Can't save form into cookie, to much data...");
  document.cookie="ses"+form.id+"="+escape(data);
}

/**
* Восстановить значение формы. Форма должна иметь уникальный атттрибут ID.
*/
function restoreFormSession(form) {
   if(!form||!form.id||!/^[^;=]+$/.test(form.id)) return false;
   var strt, end, data, nm, dat;
   if((strt=document.cookie.indexOf("ses"+form.id))<0) return false;
   if((end=document.cookie.indexOf(";", strt + form.id.length + 3))<0) end=document.cookie.length;
   data=unescape(document.cookie.substring(strt + form.id.length + 4, end)).split("||");
   for(var i=0; i<data.length-1; i++) {
      nm=/^[vsi]\(((?:[^)\\]|(?:\\\))|(?:\\\\))+)\)\:/.exec(data[i]);
      nm[1]=nm[1].replace(/\\([)\\])/g, "$1");
      dat=data[i].substr(nm[0].length).replace(/\\([|\\])/g, "$1");
      switch(data[i].charAt(0)) {
        case "v": form.elements[nm[1]].value=dat; break;
        case "s": form.elements[nm[1]].checked=(dat=="1"? true: false); break;
        case "i": form.elements[nm[1]].selectedIndex=dat; break;
      }
   }
}
//-->
</script>

<!-- Пример использования -->
<form id="test1">
<input name="text[0]" type="text" /><br />
<input name="skiped" type="text" skip_form_save="true" /><br />
<input name="pass" type="password" /><br />
<input name="radio" type="radio" /><br />
<input name="check" type="checkbox" /><br />
<textarea name="txt"></textarea><br />
<select name="sel">
<option selected="selected">Test1</option>
<option>Test2</option>
<option>Test3</option>
</select><br />
<input type="button" onclick="saveFormSession(this.form)" value="Save form" />&nbsp;
<input type="button" onclick="restoreFormSession(this.form)" value="Restore form" />
</form>
</body>
</html>

Как видим код может сохранять несколько форм, различающихся по идентификатору. Все сохраняемые поля должны иметь имена. Элемент игнорируеться если опущенно имя или задан аттрибут skip_form_save="true". Также игнорируються элементы password, hidden, file, image и кнопки.

Применяем так:

ловим событие onsubmit на форме, в обработчике сохраняем форму
ловим событие onload у body, в обработчике вовзращаем все формы

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Alx

Дата 19.5.2005, 21:19 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: нет
Всего: 78

может лучше не в куках, а в адресоной строке? после "?", а потом оттуда достать.

--------------------

Sardar

Дата 20.5.2005, 03:00 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Загадим адресную строку + размер всех данных не может превышать 1кб включая техн. инфу типа разделителей.

Лучший способ забивать формы на сервере тем что пришло, либо сохранилось в сессии.

--------------------

maxim2009

Дата 31.10.2009, 22:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 10
Регистрация: 9.10.2009

Репутация: нет
Всего: нет

Что касаемо данного скрипта, хотелось бы уточнить, каким образом вызвать restoreFormSession с помощью onLoad (совместно с BODY) - без button. Сколько я не пробовал - ничего не получилось.
Буду признателен за ответ.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Наши скрипты \| Следующая тема »