Auto Save Form script
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.
Step 1: Add the below code to the <HEAD> section of your page:
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:
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"> |
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:
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({ |
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 new autosaveform({ |
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.