jQuery Plugin To Store Form Fields In Session Storage - form-saver
File Size: | 6.77 KB |
---|---|
Views Total: | 2530 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

form-saver is a lightweight and easy-to-use jQuery plugin that stores form changed fields in local storage to help prevent users from losing data. The plugin loops through the forms who have data-save-form = save and populate them if session storage has anything for that form.
How it works:
- Find the parent form tag and get its name
- Get the input fields with using formName.
- Loop through the fields and save data into session storage.
- Lastly we set our values for current form in storage as JSON string. Parsed as JSON on page load.
- Remove item from local storage on submit
See also:
- Automatically Persist Text Field Values Locally - Garlic
- jQuery Plugin to Restore User Previously Entered Values - Remember State
- jQuery Plugin To Autosave Form Content - autoSave
- jQuery Plugin For Auto Saving Form Values
- jQuery Plugin to Save Form Fields Values To localStorage - phoenix
- jQuery Plugin To Store Form Values Into Local Storage - saveIt
How to use it:
1. Place both jQuery library and the jQuery form-saver plugin at the end of the document.
<script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="src/jq-form-saver.js"></script>
2. Add the 'data-form-name = formName' to your form element.
<form data-form-name="demo" role="form">
3. Create a button to save all the current form data into session storage.
<button type="button" data-button="save">Save Form</button>
4. Note that each form field must have a 'name' attribute as this:
<input type="email" class="form-control" name="email" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
Change log:
2016-09-26
- removes data from storage on submit and data attr. name changes
This awesome jQuery plugin is developed by surgiie. For more Advanced Usages, please check the demo page or visit the official website.