Auto-Save your content when editing in HTML Form Using savy.js Plugin

by Posted on

Hello Friends Today I am going to share one more jquery plugin to Auto-Save your content when editing in HTML Form Using savy.js Plugin. It is helpful when user filling any big form it’s automatically save your form value in localstorage So that if user accidentally refresh page then no value will be destroy but you can destroy these values at any time from local storage manually.
auto-save-form-jquery


Integrate Auto-Save Form Feature in Your Website

You only need to call plugin’s function on page with jquery and follow below example.

Libraries

Include savy.js with latest jquery plugin.

<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="savy.min.js"></script>

HTML

Created sample html form which values need to auto-save while filling.

<form>
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" class="auto-save form-control" id="name">
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="auto-save form-control" id="email">
  </div>
  <div class="form-group">
    <label for="message">Message:</label>
    <textarea rows="3" class=" auto-save form-control" id="message"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
  <button type="submit" class="btn btn-danger destroy">Destroy Local Storage</button>
</form>



JS

Call the plugin’s function on page to activate auto-save feature.

$(function() {  
 $('.auto-save').savy('load');
});

Destroy form value from local storage by clicking on button.

$(function() {  
 $( ".destroy" ).click(function() {
    $('.auto-save').savy('destroy');
  });
});

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.



Published by admin