• Download ZIP File
• Download TAR Ball
• View On GitHub

jquery-autosave by Tom Counsell

Autosave elements as they change. View the Project on GitHub tomcounsell/jquery-autosave

How to use jquery-autosave (inline setup)

<script>
  $("input").autosave();
</script>

That was easy!
Just don't forget to include jquery and this plugin.

<input type="text" name="my-input" value="original value"
    data-url="/my_backend_uri" />

All Done!
Of course there are loads more options available...

<input type="text" name="my-input" value="original value"
    data-url="/my_backend_uri"
    data-method="GET"
    data-event="change"
    data-something_else="extra information"/>

Now you're an All-Star!
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.

Let's see what was sent.

{ value:"original value", name="my-input" }

/my_backend_uri?name=my-input&value=original%20value&something_else=extra%20information

How to use jquery-autosave (js setup)

When you have several inputs you want to autosave, repeating the same data-* attributes is not usually the best practice. Consider including some settings when you apply the plugin.

$("input").autosave({
    url:    "/my_backend_uri",
    method: "POST",
    event:  "change"
});

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.

Notes

Inline data-* attributes will override global options. However the callback functions (before, done, fail, and always) must be passed in via the javascript, not as data-* attributes in the html.
Textarea elements automatically use the inner html as the value when saving.

Pro Tip #1: Autosave Anything!

<!--html-->
<textarea name="my-textarea" class="autosave"></textarea>
<select name="my-dropdown-select" class="autosave"/>...</select>

//js
$(".autosave").autosave({url:"/my_backend_uri"});

Examples with Demo

<!--html-->
<input type="text" name="input1" value="" placeholder="try me!"
    data-url="my_backend"/>

//js
$('input').autosave(
  {done:function(){alert('saved!')}}
);

<!--html-->
<button class="autosave" data-clicks="0">Click Me</button>

//js
$('.autosave').autosave({
    url:      "my_backend_uri",
    event:    "click",
    before:   function(){
                  //increment the clicks counter before sending
                  var clicks = $(this).attr('data-clicks');
                  $(this).attr('data-clicks', parseInt(clicks)+1);
              },
    done:     function(){
                  //if successful, update the front-end
                  $('#num_clicks').html($(this).attr('data-clicks'));
              }
});