Support browser autocomplete feature (saved passwords)

1

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?

2

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 }}
3

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

4

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!

5

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.

6

I have posted my findings at How to store to browser auto-complete/auto-fill when using AJAX calls - Stack Overflow 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.

1 Like