Save form values script

Configuration and use

We have all had it happen. You spend ages filling in an online form, but before you can send it, your computer crashes, or you try to send it, but your internet connection fails, or you hit the exit button by accident. In all cases, you have just lost all the work that you put into filling in the form. That is what this script is designed to prevent. It saves all the options that you chose, and all of the text you wrote, so that in the event of you losing it all, you can recover it later, just by opening the page again, or by clicking on a button. It also allows you to save usernames and passwords, so that you don't have to remember them every time.

The author of the page containing the form only needs to include the script in their page, and offer a way to save and recover the values, as I will describe here.

To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.

The script can save and recover the values of:

text inputs
textareas
password inputs (optional)
radio buttons
checkbox inputs
select inputs

The script can also save and recover the values of most new Web Forms 2.0 inputs, but note that it does not understand repetition blocks - it will save the contents of inputs inside them, but it needs the exact same number of repetition blocks to be present when saving and retrieving. The following Web Forms 2.0 inputs can be saved and retrieved:

datetime
datatime-local
date
month
week
time
number
range
email
url

Demonstration

Try it with this form; change some values, click 'Save', click 'Reset' or change some more values, then click 'Recover'.

Text:
Textarea:	blah
Password:
Radio:
Checkbox:
Excluded:	(credit card)
Excluded:	(sort code)
Standard select:
Select size=4:
Multiple select:

Using the script

The script provides two functions, one to save the form field values into a string:

var input_values_string = getFormString( reference_to_the_form, bool: include_password_fields );

And one to recover them from the string:

recoverInputs( reference_to_the_form, input_values_string, bool: include_password_fields );

The option to save (or not to save) password values is provided because Opera 5 and 6 (not 7) show warnings if you attempt to access password values. If you save form values including password fields, you should recover them with password fields as well. The script also allows you to optionally specify a list of inputs to include or exclude when saving values. See the source code of the script for details.

I suggest using my cookie script to save the form inputs into a cookie, which can be recovered using the same script:

setCookie('myCookieName',getFormString(document.forms.myForm,true));
recoverInputs(document.forms.myForm,retrieveCookie('myCookieName'),true);

The script expects the same inputs and select options to be available when it recovers input values as were available when it saved them. When the script sets the values of inputs, none of their event handlers will be activated (that is inherent in the way JavaScript works, it is nothing to do with my script). So if, for example, you were relying on an 'onchange' event handler to dynamically create inputs or options, this will not happen. For this reason, I recommend not using this script with forms that are dynamically created or modified with script. Inputs that are created using document.write as the page is loading are OK, provided that the inputs are always created and do not change depending on conditions.

There are many ways to activate this script that will be useful for your viewers. The simplest is to provide a button to save and a button to recover:

<input type="button" value="Save" onclick="setCookie('inpVal',getFormString(this.form,true));">
<input type="button" value="Recover" onclick="recoverInputs(this.form,retrieveCookie('inpVal'),true);">

Alternatively, the recover can be activated onload:

<body onload="recoverInputs(document.forms.myForm,retrieveCookie('inpVal'),true);">

And the save can be activated onunload:

<body onunload="setCookie('inpVal',getFormString(document.forms.myForm,true));">

or as the form is submitted:

<form ... onsubmit="setCookie('inpVal',getFormString(this,true));">

or for particularly long forms, you could save the form every minute or so - this will also save form values, even if the browser crashes (so onunload does not fire):

window.setInterval('setCookie(\'inpVal\',getFormString(document.forms.myForm,true));',60000);

The amount of form information that can be stored will be limited by the maximum size of document.cookie - 4KB encoded. The script does attempt to minimise the saved information size by not saving hidden inputs or button values, using only two escape characters, saving minimised information from select-one inputs - select-multiple inputs need one or two bytes for each option.

If you still need more than 4KB, the only comparable option is to use ActiveX. This restricts your viewers to users of Internet Explorer on Windows. It also relies on them having Windows Scripting (or an equivalent) enabled, and to have their security settings set low enough. This usually means that the web page will have to be stored on their computer, or on a CD. Note also that IE 6+ on Windows XP SP 2+ will also display a warning message and disable scripts, so the user will have to manually re-enable scripts for this file. As a result, storing data in text files like this is only useful for Windows HTML Applications (HTAs), where these security restrictions are not applied.

Note; in this script, I use the try...catch control structure. This is not supported in Netscape 4, but ActiveX is also not supported in Netscape 4 so it doesn't really matter does it?!

<script type="text/javascript">
var willWork = false;
if( window.ActiveXObject ) {
  //get a reference to the file system
  window.onerror = function () {
    alert( 'Your security settings are too high for this script '+
      'or scripting host is not correctly installed on your computer' );
    return true;
  };
  var FSO = new ActiveXObject("Scripting.FileSystemObject");
  //specify the file name
  var tempFile = 'myfile.txt';
  //specify the folder name (try 'My Documents' first):
  try {
    //use scripting host to get the path to a special folder
    //this does not work on all installations - including one of mine (no idea why)
    var tempFolder = ( new ActiveXObject("WScript.Shell") ).SpecialFolders("MyDocuments");
  } catch(e) {
    //error for no good reason - revert to using temp directory
    //WARNING: ALL users of this computer will be able to see the file
    var tempFolder = 'c:\\temp';
  }
  //if the folder exists, we are on a standard Windows installation
  if( FSO.FolderExists( tempFolder ) ) {
    willWork = true;
  }
}
if( !willWork ) {
  alert( 'This only works with a standard installation of'+
    ' Internet Explorer on Microsoft Windows' );
}

function saveToFile( oText ) {
  if( !willWork ) { return; }
  var theFile = FSO.OpenTextFile( tempFolder + '\\' + tempFile, 2, true );
  theFile.write( oText );
  theFile.close();
}

function readFromFile() {
  if( !willWork ) { return ''; }
  if( FSO.FileExists( tempFolder + '\\' + tempFile ) ) {
    var theFile = FSO.OpenTextFile( tempFolder + '\\' + tempFile, 1, false );
    var oOut = theFile.readAll();
    theFile.close();
    return oOut;
  } else {
    return null;
  }
}

..
saveToFile( getFormString( document.forms.myform, true ) );
...
recoverInputs( document.forms.myform, readFromFile(), true );
...
</script>

Save form values script

Navigation

Site search

Site navigation

Details and download

Configuration and use

Demonstration

Using the script