Restoring Form Field Values
Once in a while we receive reports from website owners that a visitor had to re-fill in all fields after submitting a form and then clicking the "back" button to correct information. All the fields go blank.
Today's JavaScript is designed to take care of that problem. When a form is filled in and submitted, and the user comes back to it, the form fields restore to the way they were when the form was submitted.
It's pretty much just copy 'n paste.
You do need to specify in the JavaScript the name of the form it will work with. (The name of the form is determined by the name="________" attribute in the <form...> tag.
And you'll need to past this attribute into the <form...> tag:
onsubmit="javascript:return RecordFormInformation();"
Here is an example <form...> tag:
<form name="MyForm" method="POST" action="/cgi-bin/myscript.cgi" onsubmit="javascript:return RecordFormInformation();">
The JavaScript also has a place where you can specify the cookie name. For most implementations, the cookie name can be left as is.
The JavaScript is about 150 lines of code.
<script type="text/javascript" language="JavaScript">
<!-- Copyright 2005 Bontrager Connection, LLC
// For more information, see the "Restoring Form Field Values"
// article, first published in Possibilities ezine described
// at /library/
// The form's <form...> tag needs to contain this attribute:
// onsubmit="javascript:return RecordFormInformation();"
// Put this JavaScript somewhere below the form.
// Two variables in this JavaScript can be customized.
// Customizable variable 1:
// Between the quotation marks, specify the form name:
var FormName = "MyForm";
// Customizable variable 2:
// Between the quotation marks, specify the cookie name:
var CookieName = "FormRestoreCookie";
////////////////////////////////////////////////
// //
// No other customizations need to be done. //
// //
////////////////////////////////////////////////
function GetCookie() {
if(document.cookie.length < 1) { return ''; }
var cookiename = CookieName + '=';
var cookiebegin = document.cookie.indexOf(cookiename);
cookiebegin += cookiename.length;
var cookieend = document.cookie.indexOf(";",cookiebegin);
if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
return document.cookie.substring(cookiebegin,cookieend);
} // function GetCookie()
function RestoreFormInformation() {
var CookieString = GetCookie();
if(CookieString.length < 3) { return; }
CookieString = unescape(CookieString);
var CookiePieces = CookieString.split('\t\t');
for(var i = 0; i < CookiePieces.length; i++) {
var pieces = CookiePieces[i].split('\t');
if(pieces.length < 3) { continue; }
if(pieces[1] == -1) {
if( (pieces[2].indexOf('radio') > -1) || (pieces[2].indexOf('checkbox') > -1) ) {
eval('document.' + FormName + '.' + pieces[0] + '.checked = true;');
}
else {
if(pieces[2].indexOf('select') > -1) { eval('document.' + FormName + '.' + pieces[0] + '.selected = true;'); }
else {
var ta = pieces[3].split('"');
pieces[3] = ta.join('\\"');
var ta = pieces[3].split('\n');
pieces[3] = ta.join('\\n');
eval('document.' + FormName + '.' + pieces[0] + '.value = "' + pieces[3] + '";');
}
}
continue;
}
if( (pieces[2].indexOf('radio') > -1) || (pieces[2].indexOf('checkbox') > -1) ) { eval('document.' + FormName + '.' + pieces[0] + '[' + pieces[1] + '].checked = true;'); }
else {
if(pieces[2].indexOf('select') > -1) { eval('document.' + FormName + '.' + pieces[0] + '[' + pieces[1] + '].selected = true;'); }
else {
var ta = pieces[3].split('"');
pieces[3] = ta.join('\\"');
var ta = pieces[3].split('\n');
pieces[3] = ta.join('\\n');
eval('document.' + FormName + '.' + pieces[0] + '[' + pieces[1] + '].value = "' + pieces[3] + '";');
}
}
}
} // function RestoreFormInformation()
function RecordFormInformation() {
var l = new Number();
eval('l = document.' + FormName + '.elements.length')
var NameList = new Array();
for (var i = 0; i < l; i++) {
var FORMname = new String();
var FORMfields = new Number();
eval('FORMname = document.' + FormName + '.elements[i].name;');
if(FORMname.length < 1) { continue; }
eval('FORMfields = document.' + FormName + '.' + FORMname + '.length');
if(parseInt(FORMfields) > 1) { FORMfields = parseInt(FORMfields); }
else { FORMfields = 1; }
NameList.push(FORMname + '\t' + FORMfields);
}
var FORMfieldNameNumber = new Number();
var FORMvalue = new String();
var FORMtype = new String();
var Done = new String();
var CookiePieces = new Array();
for (var i = 0; i < NameList.length; i++) {
var FORM_NL = NameList[i].split('\t');
if(Done.indexOf(' ' + FORM_NL[0] + ' ') > -1) { continue; }
Done += ' ' + FORM_NL[0] + ' ';
if(FORM_NL[1] == 1) {
FORMvalue = '';
FORMfieldNameNumber = -1;
eval('FORMtype = document.' + FormName + '.' + FORM_NL[0] + '.type;');
if( (FORMtype.indexOf('radio') > -1) || (FORMtype.indexOf('checkbox') > -1) ) {
var checked = false;
eval('checked = document.' + FormName + '.' + FORM_NL[0] + '.checked;');
if(checked == true) { FORMvalue = 'C'; }
}
else {
if(FORMtype.indexOf('select') > -1) {
var checked = false;
eval('checked = document.' + FormName + '.' + FORM_NL[0] + '.selected;');
if(checked == true) { FORMvalue = 'S'; }
}
else { eval('FORMvalue = document.' + FormName + '.' + FORM_NL[0] + '.value;'); }
}
if(FORMvalue.length < 1) { continue; }
CookiePieces.push(FORM_NL[0] + '\t' + FORMfieldNameNumber + '\t' + FORMtype + '\t' + FORMvalue);
continue;
}
for(var ii = 0; ii < FORM_NL[1]; ii++) {
FORMvalue = '';
FORMfieldNameNumber = ii;
eval('FORMtype = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].type;');
if(FORMtype == undefined) { eval('FORMtype = document.' + FormName + '.' + FORM_NL[0] + '.type;'); }
if( (FORMtype.indexOf('radio') > -1) || (FORMtype.indexOf('checkbox') > -1) ) {
var checked = false;
eval('checked = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].checked;');
if(checked == true) { FORMvalue = 'C'; }
}
else {
if(FORMtype.indexOf('select') > -1) {
var checked = false;
eval('checked = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].selected;');
if(checked == true) { FORMvalue = 'S'; }
}
else { eval('FORMvalue = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].value;'); }
}
if(FORMvalue.length < 1) { continue; }
CookiePieces.push(FORM_NL[0] + '\t' + FORMfieldNameNumber + '\t' + FORMtype + '\t' + FORMvalue);
}
}
var CookieString = new String();
CookieString = CookiePieces.join('\t\t');
CookieString = escape(CookieString);
document.cookie = CookieName + "=" + CookieString;
return true;
} // function RecordFormInformation()
RestoreFormInformation();
//-->
</script>
The JavaScript needs to be put below the location of the form. This allows the form to load before the JavaScript is run. Running the JavaScript before the form finishes loading would result in JavaScript errors.
There are two restrictions:
-
Input field type="file" can not be used (the file upload form field).
If used, the form field will not be filled back in when the page with the form is restored, and the browser might also spawn a JavaScript error message.
-
The names assigned to any <select...> fields (the name="______" attribute) may not be used for other form field names. In other words, if you have a <select name="myfieldname"> then you may not also have a <input type="text" name="myfieldname"> or other form field tags with the name="myfieldname" attribute.
If a <select...> form field name is also used as another form field name, items that were selected will not be reselected when the page with the form is restored.
Form field names not assigned to <select...> fields may be duplicated as desired. For example, groups of radio button fields almost always have the same form field name. And groups of checkbox fields sometimes do.
The unique name for <select...> fields restriction will apply to very few forms, if any. Using the same names for any form fields other than radio and checkbox fields is unusual.
Therefore, if your form doesn't use a file upload field, you're almost certainly able to use this JavaScript.
Give it a try.
Will Bontrager
