jquery.autosave.js - by Carl Furrow

jquery.autosave.js is a little plugin that can help auto-save input values to an ajax endpoint on your site so that user-input is constantly sync'd with the backend database without full-page post backs.

How do I use it?

There are a few ways you can use this plugin:

By defining some data-* attributes on your inputs
By defining some global options

Defining data-* attributes

An example of setting up some data-* attributes could be like so:

 <input type="text" name="someInput" data-url="/example" data-event="blur,change" data-id="1" value="original value" />

data-url: The url that will be used to post the data.
data-event: The jquery events used that will trigger the ajax post.

data-* attributes will override any global option set.

Starting the plugin:

 $("input").autosave();

And that's it! Now anytime you change or blur from any <input> element on the page, the plugin will look for the data-url attribute on the element that was changed, and post data to that endpoint. It will also send all other data-* attributes, as well as the 'name' and 'value' attributes. Example:

 { value:"original value", id:"1", event="blur,change", name="someInput" }

Defining global options

If you have many inputs you want to autosave, and don't want to define data-attributes on each of them, you can set some global options like this:

 $("input").autosave({url:"/example",event:"blur,change",id:"1"});

That line of code is the equivalent to the above with data-* attributes defined.

Options

These options can be passed to the plugin.

Option	Type	Default	Description
url	string	null	Url use to post ajax data.
event	string	change	Event that causes the plugin to send data to your url. See jQuery.on for options.
data	object	null	Object that holds all data that will be posted back to the url when the event is fired. You can set global default values to be sent here. All data-* attribute values end up here, minus "data-" (e.g. "data-id" becomes "id").
success	function	function(data,$jqueryElement){}	Callback used when data was saved successfully. The data returned from the ajax request, plus the jQuery element are passed to this method.
error	function	function(error,$jqueryElement){}	Callback used when data was not saved, or there was an error. The jQuery element is passed to this method.
before	function	function($jqueryElement){}	Callback called just before a request is sent to the server. The jQuery element is passed to this method.

Live demo

View-source on the following examples to see how they work.