jQuery Plugin For Auto Saving Form Values

File Size: 8.18KB
Views Total: 2795
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Auto Saving Form Values

A simple and User-Friendly jQuery plugin that periodically saves form values your users input to avoid data lose when they accidently refresh, close or leave the page. This plugin uses HTML5  DOM storage and JSON to save the values and call them back if needed.

How to use it:

1. Include jQuery library and autosaveform.js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="autosaveform.js">

2. Style the the "Saving Form Contents" DIV

div.savestatus {
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;
}

3. Create a Form with autosave function

<form id="feedbackform" method="post">
<div>Name:<br />
<input id="username" type="text" size="35" />
</div>
<div>Sex:
<input type="radio" name="sex" value="male" />
Male
<input type="radio" name="sex" value="female" />
Female</div>
<div>Hobbies:
<input type="checkbox" name="hobby" />
Reading
<input type="checkbox" name="hobby" />
Sports
<input type="checkbox" name="hobby" />
Movies</div>
<div>Country:
<select id="country">
<option>USA</option>
<option>Canada</option>
<option>Other</option>
</select>
</div>
<div>State/Province:<br />
<input id="state" type="text" size="20" />
</div>
<div>About Yourself:<br />
<textarea id="feedback" style="width:350px;height:150px"></textarea>
</div>
<input type="submit" />
</form>

4. Call the plugin with options

<script>
var formsave1=new autosaveform({
	formid: 'feedbackform',
	pause: 1000 //<--no comma following last option!
})
</script>


This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.