Why won't this form prompt the browser to offer to save password?

Question

I have the following form which is placed on the page through AJAX (jQuery AJAX if that helps):

        <div id="login">
            <iframe src="/api/core/authSystem/authUser.php" id="temp" name="temp" style="display:none"></iframe>
            <form id="loginForm" target="temp" onSubmit="App.Auth.login(); return false;">
                Email: <input type="text" name="email" id="email" onkeydown='if(event.keyCode == 13){ this.submit; }' /><br />
                Password: <input type="password" name="password" id="password" onkeydown='if(event.keyCode == 13){ this.submit; }' /><br />
                <div class="errorMsg" id="loginError"></div>
                <div class="loginHelp l"><a href="#">Cant access your account?</a></div>
                <input class="button rounded r" type="submit" id="loginButton" value="Log In" />
            </form>
        </div>

Following the suggestions made in This Question I added the iframe and am targeting that. However, browsers still will not prompt users to save the password. Any idea why?

EDIT: I have just noticed that Firefox will ask to save the password, but will not actually place it into the form once you return to the login page.

Answer 1

You can try "double-submit" technique.

In short: on first submit cancel it, but trigger it again after successful auth and do not cancel it.

More detailed:

You need to rewrite your form like this:

<form id="loginForm" onSubmit="return App.Auth.login();" method="POST" action="/back-redirector">

/back-redirector just redirects back to the same page or to the main page. I am redirecting back to the same page.

And your App.Auth.login() function must return false when it is called first time, and return true if the first call has resulted in successful login.

Like this:

letTheLoginFormDoTheSubmit = false; 
// flag to show that login was successful 
// and we need to trigger password save prompt.

login: function() {
    if (letTheLoginFormDoTheSubmit) {
        return true;
    }
    // Do the login
    // Start ajax
    ajax(login, password, function() {
        // This function is called when AJAX has completed
        if (loginIsGood) {
            letTheLoginFormDoTheSubmit = true;
            loginForm.submit(); // trigger submit again
        });
    return false;
}

So what happens?

1. When your login-function is called the first time it starts login sequence, and returns false to stop the usual form submit.
2. Login function receives data, and if login is good it saves it on browser side, raises the flag "all good, trigger password save prompt" and submits the form again.
3. But because flag is flying login-function does not do the login again it just lets the browser do form submit normally, and this triggers password save prompt.

Form is being submitted to the URL that just redirects browser back, and does not do any work.

Some caveats:

• Page will be reloaded, so save your auth cookie somehow locally, or let the redirector know which is it, so redirector can include it in a redirect.
• All form data may go through this second submit. To avoid this remove the relevant fields from the form, or remove the name attributes.
• Redirector is needed on the server side.

But in overall it is not a major change to the login process and should trigger password-save prompt in every browser.