Let me explain with an example: The user enters the index.html page with the following content:

<form name="buy" action="script.php" method="post"> <select name="type[]" id="type" multiple> <option value="0">Планшет</option> <option value="1">Телевизор</option> <option value="2">Телефон</option> </select> <input type="submit" value="OK"> </form> 

Selects "TV" and "Phone" from the drop-down list and clicks "OK." The script.php page takes the data and, in case of an error, returns the original form. JS then proceeds from POST data and adds selected to the "TV" field and the "Telephone" field.

How could such a thing be implemented (in the sense of the JS component - i.e. it is solely interested in preserving the selected fields after updating the page)?


I found this script:

 <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> 

But it does not work with multiple. How to make it work with multiple?

  • How do you submit forms? Via Form Submit or via AJAX? - temoffey
  • Form submission occurs via Form Submit, i.e. without using js. - nick777

1 answer 1

If the form data is transmitted via form submit with reloading of the pages, then the form should be completed via php:

 if ($error) { echo ' <form name="buy" action="script.php" method="post"> <select name="type[]" id="type" multiple> <option value="0"'; if (array_search('0',$_POST['type'])) echo ' selected'; echo '>Планшет</option> <option value="1"'; if (array_search('1',$_POST['type'])) echo ' selected'; echo '>Телевизор</option> <option value="2"'; if (array_search('2',$_POST['type'])) echo ' selected'; echo '>Телефон</option> </select> <input type="submit" value="OK"> </form>'; }