Auto Send Data When Form Changes - jQuery Quick Autosave

Quick Autosave is a jQuery plugin for automatic form save that automatically sends field data via AJAX when the web form changes. A great jQuery solution to preventing data loss when filling out a web form.

1. Import both jQuery JavaScript library and the jQuery Quick Autosave plugin into the html document.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="autosave.min.js"></script>

2. Specify the file to handle the ajax form submit as these:

<input type="text" name="username" class="exemple" 
       data-action="action.php">
<!-- OR -->
<form action="action.php" method="post" class="exemple">
  <input type="text" name="username">
</form>

3. Initialize the plugin.

$(".exemple").autosave();

4. The plugin supports grouped form fields and even HTML5 contentEditable element.

<!-- input group -->
<input type="text" name="username" data-group="username,token">
<input type="hidden" name="token" value="VALUE" data-group="username,token">
<!-- Editable content -->
<div contenteditable="true" class="textarea" data-name="content"></div>

5. Possible configs:

$(".exemple").autosave({
  // Ajax page
  action : {},
  // token
  pointer : {},
  // on success
  success : {},
  // on fail
  fail : {},
  // before sending
  before : {}
  
});

This awesome jQuery plugin is developed by lognoz. For more Advanced Usages, please check the demo page or visit the official website.