Form auto-save with jQuery serialize()

A friend of mine pointed me toward the jQuery .serialize() method, and after discovering this wonderful method I’ve gone kinda crazy on the possibilities.  The most useful use of this method is a very simple auto-save mechanism for web forms.  Here’s how:

Form setup

A brief description of the form setup:

  1. In your web form, create a “Save” action.  I implemented the “Save” action on a complex enough form that I wanted to allow users the option to “Save” their existing work and come back later, in addition to running the auto-save on a recurring interval for them.
    1. Whether the “Save” option is available to your users or not is up to you.
    2. Have the save action skip all required field processing or any other error checking that you have in place and simply store everything it gets (within reason, some processing may still be necessary, but skip any error reporting).
    3. In my setup, I have submit buttons for “Previous”, “Save & Continue” and “Save”.
    4. “Save” executes the save action and skips all data validation, directing the user back to the same page.
    5. “Previous” executes a save and then takes the user to the previous form page.
    6. “Save & Continue” executes the normal save + form progression which executes all of the required field processing and data validation.
  2. If you’re allowing your users to also click a “Save” button (as I have), create an additional flag that indicates an auto-save, so you can differentiate between the auto-save and a user clicking “Save”.  For example, a parameter like autosave=true.
  3. In either case, after your data processing section of the back-end processor, check for your save action or your autosave=true flag.
    1. When found, instead of navigating anywhere or displaying the form, simply echo something like:
      1. “success” if the save succeeded
      2. “failed” or some other failure message if it failed
      3. Then exit.
    2. This all happens after your data processing but before any navigation or form output.

jQuery auto-save

Add the following script to your page:

<script>
function autosave() {
	jQuery('form').each(function() {
		// For each form on the page, pass the form data via an ajax POST to
		// the save/autosave action
		jQuery.ajax({
			url: 'my_form.php',
			data: 'navigation=save&autosave=true&'+jQuery(this).serialize(),
			type: 'POST',
			success: function(data){
				if(data && data == 'success') {
					// Save successfully completed, no need to do anything
				}else{
					// Save failed, report the error if you desire
					// ....
				}
			}// end successful POST function
		}); // end jQuery ajax call
	}); // end setting up the autosave on every form on the page
}// end function autosave()

// set the autosave interval (60 seconds * 1000 milliseconds per second)
setInterval(autosave, 60 * 1000);
</script>

A few notes about the code above:

  1. Line #3 – the autosave actually gets executed for every form on the page (in case there are multiples).  That can be removed if that functionality isn’t desired, and instead on line #8 you can target a single form by id or class instead of using jQuery(this).
  2. Line #7 – we’re setting up the URL for the save to go to “my_form.php” which is the script that handles the data processing and display of the form.  This can be replaced by PHP_SELF or some other dynamic method.
  3. Line #8 – I use the navigation variable along with multiple form submit buttons to indicate whether we’re moving back, forward or performing a save operation.  If you don’t need navigation, but just the auto-save, both navigation=save & autosave=true parameters could be replaced by whatever save action you’re using.
  4. Line #8 – jQuery(this).serialize() – actually does the work of the autosave.  Since the ajax is being targeted at each form, jQuery(this) targets the current form of the .each() and serializes all of the data within that form and appends it to the data section of the jQuery ajax POST.  This effectively performs the same operation as a real POST of the form, but through ajax in the background with very little work.
  5. Line #11 – the value its comparing: “success” corresponds to the output you echoed prior to exiting in form setup step #3.a.a
  6. Line #15 – if you want to report any auto-save errors to the user, code can be placed here to alert the user or perform some other action on save failure.

And voila!  If your users are on your form any longer than the interval you specify, the auto-save will occur in the background, saving their current progress behind-the-scenes.

  • Bhagwat Singh

    Thx a lot… it works..

  • jschutt

    Excellent! Thank you for posting this. It is just what I was looking for…