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 thesearch
, 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>
With the form in place we also need an element to show the previous searches. To do that, I’ll add the following ordered list to the page:
<ol id="searches-list">
</ol>
That’s it! Our demo doesn’t need other elements, at least not static ones as we’ll see in a later section.
The Style
By default the list of the old searches will show only the main field’s value, leaving the sublist of field name/value hidden. This is useful, especially if you have a form with many fields because the whole list can easily become long, so long in fact that the user needs to scroll. As always we also want to consider that showing something only when the user hovers an element is a bad approach due to accessibility problem. Therefore, we’ll display the sublist when the main value gains the focus. This is done with the following CSS:#searches-list > li:hover dl,
#searches-list > li:focus dl
{
display: block;
}
#searches-list dl
{
margin: 0;
display: none;
}
Finally, we want to give a visual clue that the list can do something, hence we’ll also change the cursor to be a pointer:
#searches-list
{
cursor: pointer;
}
Now that we’ve done with the style, it’s time to discuss the business logic that powers the improvement.
The Business Logic
This small demo will use jQuery and jQuery.deserialize, so the first thing you need to do is to grab a copy of them and include them in the page. You also need some knowledge of the Web Storage API, so I encourage you to read the article An Overview of the Web Storage API. The first step for this section is to retrieve and store into a variable the main elements of our page, the form and the list of searches, because we’ll use them many times:var $searchesList = $('#searches-list');
var $form = $('#form');
Then we need to verify if the user has already some searches stored. If this is the case we’ll save them into a variable, otherwise we’ll initialize the variable to an empty array:
var searches = window.localStorage.getItem('searches');
searches = (searches === null) ? [] : JSON.parse(searches);
Very imaginatively I’ve named the key where the code will store the searches as “searches”. In the second statement I needed to use the JSON.parse()
method because the Web Storage API doesn’t allow to store complex data.
At this point we have to instruct what our page should do when the user performs a new search. Therefore, we’ll add an event handler for the submit
event of the form.
In the code of the live demo I showed at the beginning, the first statement of the handler stops the form to actually submit the data. This is done because the demo doesn’t have a backend but in a real-world project you don’t need it.
When the user fills the form and submits it, we need to store the values inserted into the local storage before the request is sent. To do that we first serialize the form by using the jQuery’s serialize()
method and then place the last performed search at the top of the list. In this demo we’ll avoid storing the same search multiple times, so the code searches for duplicates and removes them. Finally, the demo stores a maximum of 10 searches per user but you change this value to whatever you want. Once we have performed all these operations on the searches, we need to store them back in the local storage.
This is achieved with the following code:
$form.submit(function(event) {
// Serializes the form
var currentSearch = $(this).serialize();
searches.unshift(currentSearch);
// Removes the duplicates
for(var i = 1; i < searches.length; i++) {
if (searches[0] === searches[i]) {
searches.splice(i, 1);
}
}
// Stores only the last 10 searches
if (i === searches.length && searches.length > 10) {
searches.pop();
}
// Stores the new list into the local storage
window.localStorage.setItem('searches', JSON.stringify(searches));
});
In the demo as the last statement I’ll call a function named buildSearchesList()
that we’ll discuss shortly. It’s needed because the demo hasn’t a backend, so the HTML list needs to be recreated every time the form is submitted.
So far the page is able to store the searches performed but we need to show the list to the user so that if he/she clicks one of the items the form is autofilled. For this last part we’ll create a function called buildSearchesList()
. Inside it, we empty any previously built list and then loop over the old searches. As I mentioned, each item of the list shown will display as a mnemonic name the value of the main field, and a sublist containing all the fields of the form displayed only when the user hovers or focuses on the mnemonic name. Every time the user clicks, or presses ENTER or SPACE on an item of the list, the form is autofilled using the selected set of values.
Based on this description the skeleton of the function is as follows:
function buildSearchesList(searches, $searchesList, $form) {
$searchesList.empty();
for (var i = 0; i < searches.length; i++) {
// Other code goes here...
}
}
Inside the for
, we have to convert each item in the list retrieved from the local storage into a JSON-parsable string and then convert it into its equivalent object. Then, we loop over the properties of this object to create the sublist containing the name and values of the fields. The sublist is created using a dl
element and its related dt
and dd
.
The code that implements these steps is reported below:
var params = JSON.parse('{"' +
decodeURIComponent(
searches[i]
.replace(/&/g, '","')
.replace(/=/g, '":"')
.replace(/\+/g, ' ')
) +
'"}'
);
var text = '<dl>';
for (var key in params) {
text += '<dt>' + key + ':</dt><dd> ' + params[key] + '</dd>';
}
text += '</dl>';
Now that we have created the item of the list of the previous searches, we need to add it to the list and also instruct that if the user clicks or press one of the two keys mentioned before the form is autofilled. The form is autofilled by the jQuery.deserialize plugin and a call to its deserialize()
method. But because we’re in a loop and dealing with event handlers we have to wrap the code into an IIFE to avoid any closure issues. Finally, each list item (li
) must have a tabindex="0"
attribute otherwise it cannot be focused using the TAB key. The code that implements this last part is listed below:
(function(searchData) {
$searchesList.append(
$('<li tabindex="0">')
.text(params['search'])
.on('click keypress', function(event) {
if (
event.type !== 'keypress' ||
event.keyCode === 13 ||
event.keyCode === 32
) {
$form
.trigger('reset')
.deserialize(searchData);
}
})
.append(text)
);
})(searches[i]);
With this last snippet we’ve concluded our demo. Once again, the final result of this article is shown below and also available as a JSFiddle:
Conclusion
In this article I’ve discussed a simple technique to enhance the experience of your users in case your project has a form that is filled many times during a typical session. By using jQuery and jQuery.deserialize, in addition to the Web Storage API, we’ve created a page that is able to store a given set of searches and restore them if necessary. I hope you’ve enjoyed the article and you find it useful.Frequently Asked Questions (FAQs) about Auto-Filling Forms with jQuery and Web Storage API
How can I use jQuery to auto-fill forms?
jQuery is a powerful JavaScript library that simplifies HTML document traversing, event handling, and animation. To auto-fill forms using jQuery, you need to use the .val()
method. This method is used to get the current value of the first element in the set of matched elements or set the value of every matched element. For example, to set a value for an input field, you would use $('input').val('some value');
. This will set the value of the input field to ‘some value’.
What is the Web Storage API and how does it work?
The Web Storage API is a set of mechanisms that enable browsers to store key-value pairs. It is designed to be much more intuitive than using cookies. The key-value pairs are stored in web browser sessions. There are two main web storage types: local storage and session storage. Local storage is designed to store data for the long term, while session storage is designed to store data for one session only – the data is lost when the session is closed.
How can I use the Web Storage API to auto-fill forms?
To use the Web Storage API to auto-fill forms, you need to use the setItem()
and getItem()
methods. The setItem()
method is used to add data to the web storage, and the getItem()
method is used to retrieve data from the web storage. For example, to store a value, you would use localStorage.setItem('key', 'value');
. To retrieve the stored value, you would use localStorage.getItem('key');
.
How can I use jQuery and the Web Storage API together to auto-fill forms?
To use jQuery and the Web Storage API together to auto-fill forms, you need to use the jQuery .val()
method and the Web Storage API setItem()
and getItem()
methods. When a form field is filled out, you can use jQuery to get the value of the field and then use the Web Storage API to store the value. When the form is loaded, you can use the Web Storage API to retrieve the stored value and then use jQuery to set the value of the form field.
Can I use the Web Storage API to auto-fill forms on all browsers?
The Web Storage API is supported by all modern browsers, including Chrome, Firefox, Safari, Opera, and Internet Explorer 8 and above. However, it is always a good idea to check the browser compatibility before using the Web Storage API.
Is it secure to use the Web Storage API to auto-fill forms?
The Web Storage API is secure to use for auto-filling forms as long as you are not storing sensitive information like passwords or credit card numbers. It is also important to note that the data stored in the Web Storage API is accessible by any script on your website, so it is vulnerable to cross-site scripting (XSS) attacks.
Can I use the Web Storage API to auto-fill forms on mobile devices?
Yes, the Web Storage API is supported on mobile devices. However, the amount of data that can be stored may vary depending on the device and browser.
How can I clear the data stored in the Web Storage API?
To clear the data stored in the Web Storage API, you can use the clear()
method. This method removes all key-value pairs from the web storage. For example, to clear all data from the local storage, you would use localStorage.clear();
.
Can I use the Web Storage API to auto-fill forms on multiple pages?
Yes, the data stored in the Web Storage API is accessible across all pages from the same domain. This means you can use the Web Storage API to auto-fill forms on multiple pages.
How can I use jQuery to auto-fill select dropdowns?
To auto-fill select dropdowns using jQuery, you can use the .val()
method. This method can be used to set the selected option of the dropdown. For example, to set the selected option of a dropdown to ‘Option 2’, you would use $('select').val('Option 2');
.
I'm a (full-stack) web and app developer with more than 5 years' experience programming for the web using HTML, CSS, Sass, JavaScript, and PHP. I'm an expert of JavaScript and HTML5 APIs but my interests include web security, accessibility, performance, and SEO. I'm also a regular writer for several networks, speaker, and author of the books jQuery in Action, third edition and Instant jQuery Selectors.