Auto Store Form Values Using Cookies - jQuery inputStore

File Size: 17.9 KB
Views Total: 4128
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Auto Store Form Values Using Cookies - jQuery inputStore

Yet another jQuery plugin for preventing data loss that automatically stores form values in the cookies and restores the saved data on the next visit.

Supports any form fields such as text field, select box, checkbox input, etc.

How to use it:

1. Place the minified version of the jQuery inputStore plugin after jQuery (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="inputStore.jquery.js"></script>

2. Your form fields must have the name attribute. The name values will be used for cookie names.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control demo" id="exampleFormControlInput1" placeholder="[email protected]" name="inputname">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control demo" id="exampleFormControlSelect1" name="selectname">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control demo" id="exampleFormControlTextarea1" rows="3" name="textname"></textarea>
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input demo" id="exampleCheck1" name="checkname">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

3. Call the function inputStore() on the target form fields and done.

$("#exampleFormControlInput1").inputStore();
$("#exampleFormControlSelect1").inputStore();
$("#exampleFormControlTextarea1").inputStore();
$("#exampleCheck1").inputStore();

4. Set the expire date of the cookies. Default: 365.

$("#exampleFormControlInput1").inputStore({
  expire: 120
});

5. Customize the cookie name.

$("#exampleFormControlInput1").inputStore({
  name: this.attr("name")
});

6. Enable/disable the debug mode.

$("#exampleFormControlInput1").inputStore({
  debug: false
});

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