# Support browser autocomplete feature (saved passwords)

**URL:** <https://discuss.emberjs.com/t/support-browser-autocomplete-feature-saved-passwords/2322>\
**Category:** Uncategorized\
**Created:** [August 28, 2013, 4:29pm UTC](https://discuss.emberjs.com/t/support-browser-autocomplete-feature-saved-passwords/2322 "2013-08-28T16:29:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vanuan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/vanuan/32/15021_2.png) [@vanuan](https://discuss.emberjs.com/u/vanuan)\
**Post date:** [August 28, 2013, 4:29pm UTC](https://discuss.emberjs.com/t/support-browser-autocomplete-feature-saved-passwords/2322/1 "2013-08-28T16:29:25Z")

</div>

It’s not uncommon user needs to login. And in most browsers, there is a password manager. The problem is that for forms, that are built using javascript, browser doesn’t recognize forms. And autofill feature doesn’t work.

Did anybody handle this problem?

---

<div class="post-metadata">

**Author:** ![ahx](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ahx/32/14322_2.png) [@ahx](https://discuss.emberjs.com/u/ahx)\
**Post date:** [November 1, 2013, 11:03am UTC](https://discuss.emberjs.com/t/support-browser-autocomplete-feature-saved-passwords/2322/2 "2013-11-01T11:03:53Z")

</div>

The browser seems to identify the fields by it’s name attribute. I have had the same problem and sorta solved it by adding an arbitrary “name” attribute to my input fields.

```auto
    {{input value=email name="email" type="email" required=true }}
    {{input value=password name="password" type="password" required=true }}

```

---

<div class="post-metadata">

**Author:** ![brancusi](https://avatars.discourse-cdn.com/v4/letter/b/5f9b8f/32.png) [@brancusi](https://discuss.emberjs.com/u/brancusi)\
**Post date:** [May 26, 2014, 6:27am UTC](https://discuss.emberjs.com/t/support-browser-autocomplete-feature-saved-passwords/2322/3 "2014-05-26T06:27:22Z")

</div>

I’m having the same problem. Adding the name property didn’t help. Any news on this issue?

---

<div class="post-metadata">

**Author:** ![guigouz](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/guigouz/32/9122_2.png) [@guigouz](https://discuss.emberjs.com/u/guigouz)\
**Post date:** [June 6, 2014, 6:13pm UTC](https://discuss.emberjs.com/t/support-browser-autocomplete-feature-saved-passwords/2322/4 "2014-06-06T18:13:35Z")

</div>

The name tag might not be enough (even though it is required). To have the Chrome autocomplete fully working on my payment page (credit card and address auto completion) I had to wrap my fields around a `<form>` tag at the top of the handlebar template. The form tag must have the following attributes:

```
<form autocomplete="on" method="POST">

```

If you also wanna have your form being submitted when the user hits the `enter` key, you must use a submit button and move your action attribute in the form itself. This way:

```
<form autocomplete="on" method="POST" {{action foo on="submit"}}>
    {{input value=bar name="bar" type="text"}}
    <button type="submit">
</form>

```

Hope it helps!

---

<div class="post-metadata">

**Author:** ![jinshui](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@jinshui](https://discuss.emberjs.com/u/jinshui)\
**Post date:** [January 15, 2015, 3:12am UTC](https://discuss.emberjs.com/t/support-browser-autocomplete-feature-saved-passwords/2322/5 "2015-01-15T03:12:08Z")

</div>

I am having the same issue. This is an issue with the mechanism how AJAX submits a form request, and I think there is no a good solution for all browsers. See

> <https://stackoverflow.com/questions/9201858/how-to-store-to-browser-auto-complete-auto-fill-when-using-ajax-calls>

I noticed that the Firefox(on Ubuntu) browser works fine as long as you have a constant id or name set for the input field like this:

{{input name=‘username’ value=username}}

but chrome doesn’t.

---

<div class="post-metadata">

**Author:** ![jinshui](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@jinshui](https://discuss.emberjs.com/u/jinshui)\
**Post date:** [January 16, 2015, 7:40am UTC](https://discuss.emberjs.com/t/support-browser-autocomplete-feature-saved-passwords/2322/6 "2015-01-16T07:40:09Z")

</div>

I have posted my findings at [How to store to browser auto-complete/auto-fill when using AJAX calls - Stack Overflow](https://stackoverflow.com/questions/9201858/how-to-store-to-browser-auto-complete-auto-fill-when-using-ajax-calls/27979191#27979191) for the questions above.

Basically, we can use a hidden iframe in the same page, set the action of your form to the ‘src’ of the iframe, and add a hidden submit button inside the form, when user clicks your button which triggers AJAX requests, you should programmatically click the hidden button before sending the AJAX request. see example below:

In your form page:

```
<iframe id="hidden_iframe" name="hidden_iframe" class="hidden" src="/content/blank"></iframe>
<form id="my_form" target="hidden_iframe" method="post" action="/content/blank" class="form-horizontal">
    <input type="text" name="name">
    <input type="text" name="age">
    ....
    <button id="submit_button" type="submit" class="hidden"></button>
    <button id="go_button" type="submit" class="hidden">Go</button>
</form>

```

Then java script:

```
$('#go_button').click(function(event){
    //submit the form to the hidden iframe
    $('#submit_button').click(); 
    //do your business here
    $.ajax(function(){
        //whatever you want here
    }})
);

```

In my application, many pages need auto-complete, so I made a convenient function below:

```
    var saveFormForAutoComplete = function(form){
      var tmpIframe = document.createElement('iframe');
      tmpIframe.id = 'hidden_iframe';
      tmpIframe.name = 'hidden_iframe';
      tmpIframe.style.cssText = 'display: none';
      tmpIframe.src="/content/blank";
      document.body.appendChild(tmpIframe);

      var tmpSubmitBtn = document.createElement('input');
      tmpSubmitBtn.type = 'submit';
      tmpSubmitBtn.style.cssText = 'display: none';
      form.appendChild(tmpSubmitBtn);

      var oldTarget = form.target;
      var oldAction = form.action;
      form.target = tmpIframe.name;
      form.action = tmpIframe.src;
      tmpSubmitBtn.click();

      setTimeout(function(){
          form.target = oldTarget;
          form.action = oldAction;
          form.removeChild(tmpSubmitBtn);
          document.body.removeChild(tmpIframe);
    });
}

```

Then call the function before sending your AJAX request:

```
saveFormForAutoComplete($('#my_form')[0]);

```

Hope this helps.