Auto Send Data When Form Changes - jQuery Quick Autosave

Auto Send Data When Form Changes - jQuery Quick Autosave
File Size: 434 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

How to use it:

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="ajax.php" 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 : {}
  
});

Change log:

2018-01-31

  • v1.0.0

2018-01-23

  • Fixing first blur problem and adding timer saving

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