Auto-filling Forms with jQuery and the Web Storage API

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, radioand 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>

Continue reading this article on SitePoint

I tried this example on iPhone. I get this error SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

I looked this up and this seemed to be because of the Safari privacy settings on iPhone.
I switched to ‘Allow all’. Then the error in the console dissapeared. Then I wasn’t able to submit the form.
when i submitted the form in the console with $(‘#form’).submit() I had this error

QuotaExceededError: DOM Exception 22

Checked this also and Safari seemed to be in ‘Private Browsing mode’. When I turned this of I was able to run the examle on iPhone

Hi.

To summarize your comment, we can say that Safari is a PITA :smile:

Yes you can :smile: I am wondering what the default settings are for Safari on iPhone. Can’t find a list anywhere. Ofcourse if this autofill doesn’t work for most iPhone users because of their Safari settings you want to create something specific for these users.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.