Задача "Сохранение данных формы после перезагрузки через куки", реализации на javascript, количество: 1 - CodeLAB.YOURS # Лаборатория кода # релиз 3.0

Главная >> Каталог задач >> Веб-разработка >> Клиентский скриптинг(js, vba и т.д.) >> Формы >> Сохранение данных формы после перезагрузки через куки

<< назад

распечатать обсудить >>

Сохранение данных формы после перезагрузки через куки
реализации: javascript, количество: 1

Aвтор: неизвестный
Дата: 22.05.2006
Просмотров: 163020
Рейтинг: 3/7,4.91(3842)
+

реализации(исходники) +добавить

Метод - не самый оптимальный и приводится скорее для полноты коллекции.

Пользователь заполняет форму, постит ее на сервер. Сервер обнаруживает ошибку, возвращает сообщение об ошибке и эту же форму.

Чтобы пользователю не приходилось по-новой забивать туда все введенные ранее данные данные (те которые ошибки не вызвали) - мы после нажатия клавиши "отправить" формы, сохраняем все в куки и только затем позволяем браузеру отослать форму на сервер.

При возвращении на эту страницу с формой после перезагрузки с ошибкой мы восстанавливаем из кук все данные.

При этом код позволяет работать почти что со всеми элементами формы: input(text), textarea, radio, checkbox, select(одного выбора).

Для безопасной передачи по http протоколу данные кодируются в юникод.

Реализации: javascript(1), groovy(6), tsql(1), oracle8(5), delphi(3), rails(5), python(6), css(3), smalltalk(7), ruby(7), vb(7), plsql(3), perl(3), matlab(2), asm(4), C++(4), fortran(4), C(1), pascal(4), visualfoxpro(2), mysql(3), fortran(3), xml(2), qbasic(5), vbnet(3), php(5), sql(2), smarty(2), java(1), C#(2), lisp(2) +добавить реализацию

1) Сохранение данных формы после перезагрузки с помощью кук, code #140[автор:-]

обсудить >>

Сохранение данных формы в куки для восстановления после перезагрузки страницы, javascript, code #140 ссылка +
рейтинг: 3/7,4.83(3260), управление:

<!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);
 
  return true;
}	
/**	
* Восстановить значение формы. Форма должна иметь уникальный атттрибут 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;	
      }	
   }
 
   return true;
}	
//-->	
</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="submit" onclick="saveFormSession(this.form)" value="Save form" />&nbsp;	
<input type="button" onclick="restoreFormSession(this.form)" value="Restore form" />	
</form>	
</body>	
</html>

<!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);
  
  return true;
}	
/**	
* Восстановить значение формы. Форма должна иметь уникальный атттрибут 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;	
      }	
   }
   
   return true;
}	
//-->	
</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="submit" onclick="saveFormSession(this.form)" value="Save form" />&nbsp;	
<input type="button" onclick="restoreFormSession(this.form)" value="Restore form" />	
</form>	
</body>	
</html>

На OnClick кнопки отправки формы - вешаем сохранение.
Восстановление для тестовых целей запускается вручную по нажатию на кнопку(опять же OnClick), но для рабочей ситуации, разумно будет делать это в body -> OnLoad.

Найдено на forum.vingrad.ru.

Тестировалось на: IE 6.0 SP2, Mozilla FF 1.5, Opera 8.5

обсудить >>

<< назад наверх

распечатать обсудить >>

Сохранение данных формы после перезагрузки через куки
реализации: javascript, количество: 1

Свежие исходники:

Интересные задачи:

Популярные задачи:

*	можно кириллицей (недопустимые символы:?&+=\/%#)
**	только для зарегистрированных пользователей

Сохранение данных формы после перезагрузки через куки реализации: javascript, количество: 1

Свежие исходники:

Интересные задачи:

Популярные задачи:

Сохранение данных формы после перезагрузки через куки
реализации: javascript, количество: 1