Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Enabling browser's form auto-filling

I am making a signup form for my website. It contains various standard form fields. Such as: name, address, phone number, user name, password, etc.

When I double-click on a field (in Chrome 16), so I can auto-fill my address, I get this message:

This webpage has disabled automatic filling for this form.

I didn't disable it, so how do I enable it? I tried adding autocomplete="on" to the <form> tag, and to (some of) the <input> tags, and that didn't help.

Do I need to add autocomplete="on" to every field? Also, how does the browser know what field is what? Do I need to name the fields something special?

Another question: Is there some kind of onautocomplete event that gets triggered when a form is auto-filled? On my form, when you enter a zip code, it looks in our database (via AJAX) and then gets the state and city (city and state are dropdowns, because zip codes can be for more than one city), and fills them in for you. I was hoping I could have that run after the form was auto-filled.

P.S. I'm using the jQuery form validation plugin, if that matters.

like image 767
Rocket Hazmat Avatar asked Jan 03 '12 16:01

Rocket Hazmat


2 Answers

The problem was that the form tag didn't have method="POST" on it.

After Googling the message, I found a bug report, and one of the comments mentioned method="POST".

I added method="POST", and voila! Auto-fill works.

In some cases you may also need to add an action if the form doesn't have one. action="javascript:void(0)" works.

Note: Auto-fill seems to trigger the onchange event.

Note 2: As for how the browser knows what field is what, see this question: How to trigger Autofill in Google Chrome?

like image 139
Rocket Hazmat Avatar answered Oct 04 '22 04:10

Rocket Hazmat


The option to turn off autcomplete is normally located in the form tag, see the Developer page from Mozilla here. This should mean that normally removing that attribute should enable it again on a webpage.

Concerning the second part with the AJAX request, I don't think there's a listener for that, but you could add a function that checks the value of the field each x seconds for example, and if it changed you can perform your lookup.

like image 40
canihavesomecoffee Avatar answered Oct 04 '22 04:10

canihavesomecoffee