Auto Saving your web form data

There is nothing more frustrating than filling a complex web form and just as you are ready to submit it, you accidentally hit refresh, close your window tab or the browser just crashes on you. Only if you could add some kind of auto-save feature to the form to mitigate this problem. Applications like Gmail, WordPress both support the auto-save feature, albeit in a technically different way.

Persisting your form data

With the HTML5 local storage feature, your web applications can now save the form data in the local storage until the time it is submitted or reset. This will help avoid users from re-entering the form data in case he loses the data for some reason.

But integrating local storage in your application is a lot of work and most people avoid it for small projects. But now with various libraries available, saving data in local storage has become easier. One such interesting library is Sisyphus – named after the Greek king who was punished by being compelled to roll an immense boulder up a hill, only to see it roll back down, and to repeat this action forever. Sisyphus allows you to fill web forms with the guarantee that if for some reason you lose your form data before submitting the form, the form data is not lost, saving users the trouble of re-entering the data again.

Integrating Sisyphus with your forms

Sisyphus is a jQuery plugins and integrating it is easier than you can imagine. A basic form layout with jQuery an Sisyphus libraries loaded is shown below.

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="sisyphus.min.js"></script>
</head>
<body>
<form action="" id="myform" name="myform" method="post">
Name:<br />
<input type="text" name="name" value="" /><br />
E-mail:<br />
<input type="text" name="mail" value="" /><br />
Comment:<br />
<input type="text" name="comment" value="" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>

Now all you have to do is activate the Sisyphus function in your jQuery load event or add the function in the footer.

$('#myform').sisyphus();

This will enable your form to have the auto-save capability. To auto-save all forms on your page you can also use the following.

$('form').sisyphus();

You can further customize various options available with Sisyphus, the default of which are shown below.

{
  customKeyPrefix: '',
  timeout: 0,
  onSave: function() {},
  onRestore: function() {},
  onRelease: function() {},
  excludeFields: null
 }

So instead of the default auto-save time of ‘0’ seconds, we can set auto-save to lets say 5 seconds.

$('form').sisyphus({timeout: 5});

You can also trigger a pop notice whenever the data is saved using the ‘onSave’ handler. The following for example echoes a message to the Firebug console whenever data is auto-saved.

$('form').sisyphus({
        timeout: 5,
        onSave: function() {
          console.log('Data is now saved to Local Storage');
   }
});

In the same manner as above you can use other handlers available with Sisyphus.



5 thoughts on “Auto Saving your web form data

  1. Awesome tool, but I worry about sensitive information. How does it keep credit card, social security numbers, etc safe?

  2. Shane, looks like you can exclude fields. I would do that for anything you are worried about.

  3. hi, after implementing this to save the web form details when agents try to use fill forms repeatedly they get an alert stating “Stop running this script as it makes response slow or unresponsive

    please suggest what has to be done

    $(window).load(function()
    {
    $(‘form’).sisyphus(//’#CustiForm’).sisyphus(
    {
    customKeySuffix: ”,
    onBeforeRestore: function()
    {
    return confirm(‘Do you wish to load Old Data if Available?’);
    }
    }
    );
    onloadview();
    });

Comments are closed.