🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Whenever a change event happens any <input> element on the page, the elements new value will save to the specified url. It will also send all other data-* attributes, as well as the ‘name’ and ‘value’ attributes.

Forms Plugins

Documentation

jquery-autosave

// simple $("input").autosave(); 

Watches change events on all inputs, POST-ing their values to your backend.

// awesomeness $(".autosave").autosave({ url:"/save", done:function(){}, fail:function(){} }); 

Use a class and when those elements change, they will POST their values and data-* attrs to your url and include callbacks just like $.ajax

Options

The following options can be passed to the plugin when it is initialized.

Option Type Default Description
url string null The URL to which the request is sent.
method string "POST" The type of request to make, usually POST or GET. Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.
event string "change" Event that causes the plugin to send data to your url. See jQuery.on for options.
type string "html" Specify the dataType you are expecting (xml, json, script, or html)
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-foo" becomes "foo").
debug boolean false Will stop any requests from being performed and will console.log the data variable inside of the autosave library

##Callbacks/Promises The following promise methods are available. However, if used, they should be included as options when autosave is initialized. See demos below for implementation example.

Callback Description
before: function(){} Called just before processing the autosave. This is a great place to make some last second changes to the inline html data-* attributes.
done: function(data, textStatus, jqXHR){} Called when the autosave ajax call was successful.
The function's arguments are the same as those in a jqXHR.done() in jQuery.ajax (data, textStatus, and the jqXHR object).
fail: function(jqXHR, textStatus, errorThrown){} Called when the autosave ajax call failed or there is an error in the response. Note: Default 'type' is 'html' and it must match the response or even a 200(OK) status response will show as failed.
The function's arguments are the same as those in a jqXHR.fail() in jQuery.ajax (jqXHR, textStatus, errorThrown).
always: function(){} Called when finished, whether successful or not. This is the very last process performed during an autosave.

originally forked from cfurrow/jquery.autosave.js at https://github.com/cfurrow/jquery.autosave.js


You May Also Like