Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
102 lines (82 sloc) 3 KB
* js_save_load_form.html
* @author:
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>The HTML5 Save/Load Data</title>
<meta name="description" content="The HTML5 Page">
<meta name="author" content="">
<h1>Form Save and reLoad values from/to LocalStorage </h1>
A common usage of larger forms is to SAVE their values,
in case the user re-freshes the page, presses the back button, or
just looses connection. Nothing is more frustrating on-line than, filling out a long
complex form, only to have a server error and then have to re-do it again.
The simple form below uses JQuery to loop through the form and save the values to LocalStorage (User's browser)
Then on re-visits to the page, it reloads those values from LocalStorage. Also an Jquery I use an event to
bind to the onKeyUp / onChange input so whenever a user changes the form is automaticcaly saved
<div class="container">
<form id="myformID" action="#" method="post" class="form-control">
<input placeholder="Your name" id="name" type="text" tabindex="1" required autofocus>
<input placeholder="Your Email Address" id="email" type="email" tabindex="2" required>
<input placeholder="Your Phone Number" type="tel" id="tel" tabindex="3" required>
<input placeholder="Your Web Site starts with http://" id="url" type="url" tabindex="4" required>
<textarea placeholder="Type your Message Here...." id="message" tabindex="5" required></textarea>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
<button name="reset" type="reset" >Reset</button>
<script src=""></script>
<script language="javascript">
/** reloadSaved() reloads saved form data if any exists */
function reloadSaved() {
$.each( $('form input'), function() {
input_name = $(this).attr('id');
if (localStorage[input_name])
console.log("Restoring: "+input_name +" with "+localStorage[input_name] ) ;
/** SaveForm() saves ALL form data into LocalStorage */
function SaveForm() {
$.each( $('#myformID :input'), function() {
input_name = $(this).attr('id');
localStorage[input_name ] = $(this).val();
console.log("Saving: "+input_name +" = "+ $(this).val() ) ;
reloadSaved(); //re-load any saved data
// Bind all CLASS form-control changes to trigger Saveform
$('.form-control').bind("change", function(){
SaveForm(); //Save the form
You can’t perform that action at this time.