jQuery.AutoSaveForm

jQuery plugin for auto saving forms while editing. To use simply add the following line to your ready function:

$('form').autoSaveForm();

Demo

Install

You can download the jquery.auto-save-form.js file to include in your page or you can install it using Bower:

$ bower install jquery.auto-save-form

##Requirements jQuery version 1.7 or higher.

Usage

$(function() {
	var $form = $('form');
	var $formStatusHolder = $('.js-form-status-holder');

    // Enable on all forms
    $form.autoSaveForm();

    // or with options
    $form.autoSaveForm({ delay: 2000 });

    // The following triggers confirm to the beforeSend, error and success ajax callbacks.
	$form.on('beforeSave.autoSaveForm', function (ev, $form, xhr) {
		// called before saving the form
		// here you can return false if the form shouldn't be saved
		// eg. because of validation errors.
		if (!$form.valid()) {
			return false;
		}

		// Let the user know we are saving
		$formStatusHolder.html('Saving...');
		$formStatusHolder.removeClass('text-danger');
	});

	$adminForm.on('saveError.autoSaveForm', function (ev, $form, jqXHR, textStatus, errorThrown) {
		// The saving failed so tell the user
		$formStatusHolder.html('Saving failed! Please retry later.');
		$formStatusHolder.addClass('text-danger');
	});
	$adminForm.on('saveSuccess.autoSaveForm', function (ev, $form, data, textStatus, jqXHR) {
		// Now show the user we saved and when we did
		var d = new Date();
		$formStatusHolder.html('Saved! Last: ' + d.toLocaleTimeString());
	});
});


// To manually trigger a save on the form you can call
$('#my-form').trigger('save.autoSaveForm');

Options

| parameter | description | default | |---------------|-----------------------------------------------------|--------------------------------------------------------| | timeout | Time delay between input and the saving of the data | 1000 | | fieldEvents | The events on which a save will be initiated | change keyup propertychange input | | fieldSelector | Selector for the fields to monitor for changes | :input:not(input[type=submit]):not(input[type=button]) |