Originally published at: http://www.sitepoint.com/auto-filling-forms-jquery-web-storage-api/
In a project I developed a few years ago there was a search form made of a main field and then many other fields to refine the search. In that project a user typically needed to perform the same search multiple times with just one or two fields changed. Filling the form again and again was a pain so we decided to help the users in quickly achieving their goal.
In this article I’ll show you how to recreate the same improvement using jQuery, jQuery.deserialize, and the Web Storage API.
The Requirements
To improve the form I mentioned in the introduction, we decided to show a list of previously performed searches, up to 20. The searches are stored into the browser using the Web Storage API. If you have a login system in place, you may want to modify the demo so that the searches are stored in a database. In my case this wasn’t an option as there wasn’t a login system.
Each item of the list is made of text representing the value the user wrote in the main field, and a sublist showing the name of the field and the value(s) written or selected (in case of checkboxes and radio buttons). When the user clicks one of these searches, the form’s fields are automatically filled with the values of that search. Doing so, if the user needs to perform the same research he/she has nothing to do but click the Submit button; otherwise the user can change the fields needed and then perform the search. This small improvement saved a lot of time for the users of that project and was much appreciated.
The final result of this article is shown below and also available as a JSFiddle:
The Markup
The first step is to create the form to enhance. If you’ll use this approach in a project you are working on, you’ll have your own with its own specific fields, but for the sake of the example here I’ll create a dummy one containing a different type for each field. For instance, I’ll use the search
, text
, email
, checkbox
, radio
and date
type. This way you can see how this method works with different types.
There is nothing more to say about the form, so here is the code that we’ll employ:
<form name="form" id="form"> <label for="search">This is the main search field:</label> <input type="search" name="search" id="search" /> <label for="text">This a text field:</label> <input type="text" name="text" id="text" /> <label for="email">This an email field:</label> <input type="email" name="email" id="email" /> <label>This a set of checkbox:</label> <label> Checkbox1: <input type="checkbox" name="checkbox[]" value="checkbox1" /> </label> <label> Checkbox2: <input type="checkbox" name="checkbox[]" value="checkbox2" /> </label> <label>This a set of radio buttons:</label> <label> Radio1: <input type="radio" name="radio" value="radio1" checked /> </label> <label> Radio2: <input type="radio" name="radio" value="radio2" /> </label> <label> Radio3: <input type="radio" name="radio" value="radio3" /> </label> <label for="date">This a date field:</label> <input type="date" name="date" id="date" /> <input type="reset" value="Reset" /> <input type="submit" value="Submit" /> </form>