|File Size:||6.77 KB|
|Official Website:||Go to website|
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
- 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">
- removes data from storage on submit and data attr. name changes