https://github.com/dynamicdriverepo/autosaveformvalue

https://github.com/dynamicdriverepo/autosaveformvalue

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/dynamicdriverepo/autosaveformvalue
• Owner: dynamicdriverepo
• Created: 2013-02-08T18:16:30.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2013-02-08T18:25:43.000Z (almost 12 years ago)
• Last Synced: 2023-04-06T14:06:48.741Z (over 1 year ago)
• Language: JavaScript
• Size: 99.6 KB
• Stars: 2
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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.

## Directions ##

*Step 1:* This script uses the following external files:

+ jQuery 1.6 or above (served via Google CDN)

+ autosaveform.js

*Step 2:* Add the below code to the HEAD section of your page:

	

	

	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;

	}

	

	form#feedbackform div{ /*CSS used by demo form*/

	margin-bottom:9px;

	}

	

	

	

	

	

	

	/***********************************************

	* Auto Save Form script (c) Dynamic Drive (www.dynamicdrive.com)

	* This notice MUST stay intact for legal use

	* Visit http://www.dynamicdrive.com/ for this script and 100s more.

	***********************************************/

	

	

	

	

	

	var formsave1=new autosaveform({

		formid: 'feedbackform',

		pause: 1000 //<--no comma following last option!

	})

	

	

*Step 3:* Then, add the below sample markup to your page:

	

	

	
Name:
 

	

	
Sex: Male Female

	

	
Hobbies: Reading Sports Movies

	

	
Country: 

		USA

		Canada

		Other

		

	

	

	
State/Province:
 

	

	
About Yourself:
 

	

	

	

	


## Auto Save Form script set up ##

See script project page for additional details on setup and documentation: