Guide to have Persistent Form data using jQuery

Persistent Form data using jQuery
Hello Friends! Hope you all are doing good. Today I am sharing a trick that I tried in one of my projects. Here in this trick or guide we will try to have persistent form data with the help of jQuery.

The problem statement is that any times we fill form and we have.server side validations which cause the form data to be emptied out and causes the users to feel bulky in form filling. They will have to fill that form once again. Or it may happen that they have moved to some other link which will cause the form data loss.

So to solve this problem I’m here with something unique which will help in form filling.

To have Persistent Form data we will use jQuery and jQuery Cookies plugin.

The idea is to store the form data in the cookies and refill tht data if the form is called once again. And if the for submission goes successful; we will just clear the cookies.

So here it goes. We will create a one page form and include our scripts. And then when form is being navigated away; our data will be there. But for now we are only targeting on page links to navigate away. In later experiments we will handle browser navigation also.

So first we need to embed the jQuery and jQuery cookies plugin to our page. Download the jQuery Cookie Plugin from here.

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

Now here is the JS function which will capture the form data and store to the cookies.

function saveCookie() {
  $('form').each(function(i) { 
    x = $(this).attr('name'); 
    str = $(this).serialize();
    $.cookie(x, str, {expires : 2});
  });
}

This Function will capture the data from all the forms on a webpage and save it in cookies.

Now here is the function will restore the form data

function restoreCookie() {
  $('form').each(function(i) {
    x = $(this).attr('name'); 
    str = $.cookie(x);
    data = str.split('&');
    $(data).each(function(element) {
      a = this.split('=');
      $('input[name="'+a[0]+'"]').val(decodeURIComponent(a[1]));
    })
  });
}

This function restoreCookie; when called; will restore the form data.

Now here is the code which will make use of above two functions and make the scenario work.

$(document).ready(function(e){
	restoreCookie();
	$('a').click(function(e){
		e.preventDefault();
		saveCookie();
		window.location = $(this).attr('href');
	});
});

So On combining all the required logic here is the complete code

<script>
function saveCookie() {
  $('form').each(function(i) { 
    x = $(this).attr('name'); 
    str = $(this).serialize();
    $.cookie(x, str, {expires : 2});
  });
}
function restoreCookie() {
  $('form').each(function(i) {
    x = $(this).attr('name'); 
    str = $.cookie(x);
    data = str.split('&');
    $(data).each(function(element) {
      a = this.split('=');
      $('input[name="'+a[0]+'"]').val(decodeURIComponent(a[1]));
    })
  });
}
function resetForm(formName){
  $(formName).reset();
  $.removeCookie(formName);
}
$(document).ready(function(e){
	restoreCookie();
	$('a').click(function(e){
		e.preventDefault();
		saveCookie();
		window.location = $(this).attr('href');
	});
});
</script>

And here is the markup on which we are testing this

<div class="menu">
  <span><a href="home.html">Home</a></span>
  <span><a href="index.html">Cookie Page</a></span>
</div>
<form name="loginForm" method="post" action="">
  <label>Email</label>: <input name="email" type="text" value="" /><br />
  <label>Password</label>: <input name="password" type="password" value="" /><br/>
  <center><input type="submit" name="login" value="Login"><input type="reset" onclick="resetForm('loginForm')" value="Reset Form"></center>
</form>
<hr />
<form name="registerForm" method="post" action="">
  <label>Name</label>: <input name="name" type="text" value="" /><br />
  <label>Email</label>: <input name="email" type="text" value="" /><br />
  <label>Gender</label>: <input name="gender" type="radio" value="M" /> Male  <input name="gender" type="radio" value="F" /> Female<br />
  <label>Password</label>: <input name="password" type="password" value="" /><br/>
  <center><input type="submit" name="register" value="Register"><input type="reset" onclick="resetForm('registerForm')" value="Reset Form"></center>
</form>

Thats it for basic Persistant Forms using jQuery. You can see the demo or Download the files:

Demo  Download