How to automatically save your Content in HTML Form using Jquery Plugin

In this post I introduce one awesome jQuery plugin to Auto-Save your content when editing in Form.

In this Plugin very helpful when user filling any big form it’s automatically save your form value in local storage (Client Side) So that if user accidentally refresh page then no value will be destroy. When click submit or reset button these values at any time from local storage manually.

Needed Libraries

sisyphus.min.js

Include sisyphus.min.js with latest jquery plugin.

Download Files

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

<html>
   <head>
      <title>Auto-Save your Content </title>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="/sisyphus.min.js"></script>
   </head>
   <body>
      <div class="row">
         <div class="col-md-6">
            <form id="autosaveform">
               <div class="col-md-12">
                  <h4>Auto-Save your content when editing in Form</h4>
                  <div class="form-group">
                     <label>Name</label>
                     <input type="text" class="form-control" name="name">
                  </div>
                  <div class="form-group">
                     <label>Gender</label><br>
                     <input type="radio" name="gender" value="male" checked> Male<br>
                     <input type="radio" name="gender" value="female"> Female<br>
                  </div>
                  <div class="form-group">
                     <label>Mobile Number</label>
                     <input type="text" class="form-control" name="mobile">
                  </div>
                  <div class="form-group">
                     <label>Email</label>
                     <input type="text" class="form-control" name="email">
                  </div>
                  <div class="form-group">
                     <label>Address</label>
                     <textarea class="form-control" name="address"></textarea>
                  </div>
                  <div class="form-group">
                     <button type="submit" class="btn btn-success">Submit</button>
                     <button type="reset" class="btn btn-success">Reset</button>
                  </div>
               </div>
         </div>
      </div>
      </form>
   </body>
</html>

Call following function on page to activate auto-save feature.

<script>
$( function() {
$( "#autosaveform" ).sisyphus()
} );
</script>

 

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *