How to make Chrome remember password for an AJAX f

Question

I'm using AJAX for fast input validation on my login page. If everything is correct, the user is redirected.

Here's the code:

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
   }
...

It works really well in all browsers. But there's a problem in Chrome. It doesn't offer to save the password.

When JavaScript is turned off, the password is saved, so the problem is definitely in redirection to a new location.

How can I fix that?

Answer 1

I found that the username and password input fields must have the name tag set in order for Chrome to offer to save the password. This thread is about simple forms, but the same fixed my jquery AJAX form submission.

Answer 2

In my case Chrome didn't remember password because there were two different inputs of type password in one form (create/login in one form). The issue in my case was solved by using javascript manipulation of removing one of the input of type password so that browser could decide which submitted fields contains credential data.

Answer 3

Are you able to change the form's action value to data.redirectUrl and let the form submit as usual? This should trigger the browser's prompt to save the username and password.

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            $("form#name").attr('action', data.redirectUrl);
        }
    }
...

Answer 4

I have fixed it using this way:

<form action="/login"></form>

And the JavaScript:

$(form).submit(function () {
   if(-1 !== this.action.indexOf('/login')) {
      var jForm = $(this);
      $.post(this.action, $(this).serialize(), function (data) {
         if (data.status == 'SUCCESS') {

            // change the form action to another url
            jForm[0].action = data.redirectUrl;

            // and resubmit -> so, no AJAX will be used 
            // and function will return true
            jForm.submit();
         }
      });
      return false;
   }
}

Answer 5

I have found a dirty workaround for this problem, by inserting an invisible iframe and targeting the form to it:

<iframe src="/blank.html" id="loginTarget" name="loginTarget" style="display:none">
</iframe>

<form id="loginForm" action="/blank.html" method="post" target="loginTarget"></form>

The corresponding JavaScript:

$('#loginForm').submit(function () {
    $.post('/login', $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
    })
})

The trick is, that there are really two requests made. First the form gets submitted to /blank.html, which will be ignored by the server, but this triggers the password save dialog in Chrome. Additionally we make an ajax request and submit the real form to /login. Since the target of the first request is an invisible iframe the page doesn't refresh.

This is of course more useful if you don't want to redirect to another page. If you want to redirect anyway changing the action attribute is a better solution.

Edit:

Here is a simple JSFiddle version of it. Contrary to claims in the comment section, there is no reload of the page needed and it seems to work very reliably. I tested it on Win XP with Chrome and on Linux with Chromium.

Answer 6

From yesterday, 10/07/2013, Chrome 28, it's now possible without any trick. Seems they fixed that...