Support browser autocomplete feature (saved passwords)


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?


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.

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


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


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">

Hope it helps!


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

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.


I have posted my findings at 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>

Then java script:

    //submit the form to the hidden iframe
    //do your business here
        //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'); = 'hidden_iframe'; = 'hidden_iframe'; = 'display: none';

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

      var oldTarget =;
      var oldAction = form.action; =;
      form.action = tmpIframe.src;;

 = oldTarget;
          form.action = oldAction;

Then call the function before sending your AJAX request:


Hope this helps.