12

I've got a new site we're working that uses HTML5. Everything validates except for the LESS stylesheets and the Facebook tags. However, Chrome will not autofill properly. If I type 'chr' in the first name field, I get the standard Autofill drop down beneath it, but highlighting, clicking, or otherwise selecting the autofill option does not complete the form as it should. The autofill dropdown merely goes away.

I'm guessing there's something in my HTML that is confusing the autofill code, but I can't seem to find any information on the web about Chrome's autofill implementation and things to look for when it doesn't work.

Edit: I know Autofill is working properly because it works on other sites, even other sites we've developed. It's got to be something specific to the HTML on this site.

2
  • Please provide some HTML + JS code sample. I have a hunch that you have some js code that prevents the form submit action, assuming that you are using a FORM tag in the first place.
    – Kayhadrin
    Mar 5, 2014 at 3:54
  • Here's a potential solution for your issue: stackoverflow.com/questions/16445463/…
    – Kayhadrin
    Mar 5, 2014 at 7:17

6 Answers 6

17

Chrome will not save password or autocomplete data if a form is submitted asynchronously. For example, if you submit the following form, Chrome will prompt you to save the password:

<form action="/signin">
    <input type="text" name="email" />
    <input type="password" name="password" />
    <button type="submit">Sign In</button>
</form>

However, if you bind to the submit event and override the default behavior, there will be no prompt and the autocomplete data won't be saved:

$(function(){
    $('form').submit(function(e){
        e.preventDefault();
        $.post($(this).attr('action'), $(this).serialize());
    });
});

Tested in 20.0

3
  • That's all pretty irrelevant considering the saved user data exists already and it should have been offering to fill the form prior to it ever being submitted.
    – Chris
    Jul 31, 2012 at 19:02
  • I know this is a year afterward. I was having this issue because I submitted my form asynchronously. I made this question a few hours ago. I wonder if you had an opinion on whether this is a good method of getting around this behavior. It seems to work in Chrome.
    – 1252748
    May 8, 2013 at 19:03
  • Hi Christopher, I am submitting my forms via $('form').submit() and I WANT autocomplete to work. However, autocomplete only works, if the form gets submitted via submit button button type="submit", any idea simulate the button submit so that Chrome does autocomplete? thanks
    – basZero
    Nov 28, 2014 at 16:34
7

It seems that Chrome only enables the autofill for forms with a POST method. This may have been a security update on a recent version.

Autofill will work if you do:

<form id="myForm" action="?go" method="post">

It won't work if you omit the method or it's set to get:

<form id="myForm" action="?go" method="get">

<form id="myForm" action="?go">

1
  • In my case I only needed to wrap the elements in a <form> tag (without an action or method) to get address autocompletion to work.
    – Ben
    Jul 3, 2018 at 15:52
3

The only way I know of in HTML to block it is setting: autocomplete="off" on the inputs.

I know drop downs don't work sometimes with autofill, but not text boxes.

0
2

I have just fighted with this issue for a while, I found out that a "name" attribute with a dash like "email-2" would cause Chrome not to autocomplete the field. In my case I have changed it to email2 and now it works. It only affects the "name" attribute, while the "id" attribute does not make any difference.

I hope this help someone to save time with such a silly bug.

Greetings from Argentina!

0

Sorry I can't give you a definitive answer, but I would start with removing everything from the page except that input field. If it works then I would start "binary search" - remove half of the original layout and see if it works, if it isn't - remove another half of what's left and so on, until problem line is found.

Same could be applied to css, js, etc. It is a pretty effective way of searching for errors (for 1024 lines of code you will find exact problem line in just 10 steps).

-1

Only Those elements which require autofill should be there inside the form.otherwise the autofill wont work.Bring only those textboxes under a form.if u already have form involving other elements,separate them and put new form tag around the textboxes which require autofill and nothing else inside it.

1
  • 1
    This is not the case of many forms with autocomplete i found on many websites, where i autocomplete only a portion of the form
    – gbalduzzi
    May 23, 2016 at 11:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.