New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF3.5+ IE9+ Opera 11+

Auto Save Form script

Author: Dynamic Drive

Description: The most agonizing thing that can happen while filling out a form is accidently losing the entered contents before having a chance to submit it. This can happen if you inadvertently navigate to another page or close the window, among other things, during the process. Well, Auto Save Form script is here to add a layer of insurance against such a travesty from occurring. A nifty plug and play script, it periodically saves the contents of any form and recalls them if needed, up until when the form is actually submitted. This means if the user accidently leaves or reloads the page or even if the browser crashes (Firefox only feature) before then- the entered form contents will be restored.

The script uses HTML5's DOM storage and JSON to accomplish its mission. As such, it only works in modern browsers, from IE9+, FF3.5+, Safari/Chrome, to Opera 11. However, it degrades perfectly with the rest of the bunch, making this a nice progressive feature you can immediately add to your forms.

Demo: All form fields' values below are auto saved 1 second after changing them. Hard reload page to see those values recalled. Submitting form clears saved data.

Contact Info
Name:
Sex: Male Female
Hobbies: Reading Sports Movies
Country:
State/Province:
About Yourself:

Directions: Developer's View

Step 1: Add the below code to the <HEAD> section of your page:

Select All

The above references a single .js file, which you should download (right click, and select "Save As")

Step 2: Then, insert the below HTML code onto your page, which contains the HTML markup of a single demo form:

Select All

And that's a wrap for installation, but read on to get all the important details on customizing the script.

Making sure your form is ready to be auto saved

The script only requires that your form carries an ID attribute for the FORM element itself, and either ID or NAME attributes for the fields that you wish to be auto saved. For checkboxes or radio buttons, you'll want to explicitly resort to the name attribute for its ability to group boxes together (so only one box within the group can be selected at any time). The following form conforms to the standard naming scheme required by the script:

<form id="feedbackform">

Name:<br /> <input id="username" type="text" size="35" /><br />

Sex: <input type="radio" name="sex" value="male" />Male <input type="radio" name="sex" value="female" />Female<br />

Hobbies: <input type="checkbox" name="hobby" />Reading <input type="checkbox" name="hobby" />Sports <input type="checkbox" name="hobby" />Movies<br />

Country: <select id="country">
<option>USA</option>
<option>Canada</option>
<option>Other</option>
</select><br />

About Yourself:<br /> <textarea id="feedback" style="width:350px;height:150px"></textarea><br />

<input type="submit" />

</form>

In other words, as long as your form is well formed the relevant fields are properly named, the script is ready to rescue it!

Calling the new autosaveform() initialization function

With your form passing muster, all that's left is to call the autosaveform() function in the HEAD section of your page to apply auto save functionality to the form in question. The function has the following syntax:

var uniquevar=new autosaveform(setting)

where "uniquevar" should be an arbitrary but unique variable name assigned to this instance of Auto Save Form, and "setting" is an JavaScript object containing the settings for it. An example would be:

<script type="text/javascript">
 var formsave1=new autosaveform({
 formid: 'feedbackform',
 includefields: ['text', 'textarea'],
 pause: 3000
})
</script>

The following lists all the options for the setting object for autosaveform():

option Description
formid

Required

The ID of the form you wish to auto save its field values, for example:

<form id="feedbackform">
"
</form>

includefields

defaults to ['text', 'textarea', 'checkbox', 'radio', 'select']

An array of keywords that sets the type of fields within the form the script should auto save their values. The default is all of the supported field types, which is ['text', 'textarea', 'checkbox', 'radio', 'select']. Here's a explanation of each keyword:
  • "text": Includes all <input type="text" /> elements
  • "textarea": Includes all textarea elements
  • "checkbox": Includes all <input type="checkbox" /> elements
  • "radio": Includes all <input type="radio" /> elements
  • "select": Includes all <select> elements

To maximum efficiency, you should only specify the type of fields within your form that you wish to auto save, and leave the rest out. The below changes the default setting to only auto save TEXT and TEXTAREA fields:

new autosaveform({
 formid: 'feedbackform',
 includefields: ['text', 'textarea'],
 pause: 3000
})

pause

defaults to 1000

Sets the pause/delay between auto saving of the form. It's calculated from the time the user starts to and then stops interacting with one of the specified fields within includefields above. Defaults to 1000 milliseconds, or 1 second. The minimum recommended number is 1000.
savingmsg

defaults to "Auto Saving form values..."

If set to anything other than null or an empty string ("") causes the script to display at the top of the form a custom message each time the form fields are auto saved to inform the user the form contents are being remembered. This message is wrapped in a DIV with CSS class "savestatus", which you can customize its style using.

The following savemsg setting disables the message from appearing altogether:

new autosaveform({
 formid: 'feedbackform',
 includefields: ['text', 'textarea'],
 savingmsg: "" //disables "auto saving" message from appearing
})

Styling the "Saving Message"

The "Saving form contents" message that appears briefly at the top of the form each time its contents are saved is assigned a CSS class of "savestatus". The default style for the message can be found in the code of Step 1 you added to your page:

<style>
div.savestatus{ /* Style for the "Saving Form Contents" DIV that is shown at the top of the form */
width:200px;
padding:2px 5px;
border:1px solid gray;
background:#fff6e5;
-webkit-box-shadow: 0 0 8px #818181;
box-shadow: 0 0 8px #818181;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
color:red;
position:absolute;
top:-10px;
}
</style>

Modify the style for div.savestatus as desired.

Seeing the script in action

With the script installed on the desired form, in order to see its auto saving abilities in action, you may need to view and fill out the form after it's been uploaded to your web server (versus locally). The mechanism the script uses -DOM Storage- only works when a page is online in most browsers. A noteworthy exception seems to be Webkit browsers such as Safari and Chrome; in these browsers, you can test out this script even locally on your computer and see the form field contents persisted upon reloading the page.