Ajax login form - browsers won't save password

Question

I have Ajax login form, which is checking whether given credentials are correct and redirects to another page. The login form itself is built by a HXR call - it isn't built in the login page code.

The problem is that I can't get browsers to prompt for remembering passwords. Once I've got the Firefox to prompt but since the form is being built by XHR call, the Firefox didn't paste the values into the form.

PS. I am using mootools (Form.send) and usual window.location when login was successful. PSS. The address of the login page is always the same.

The following code is loaded by a XHR within a element (I am using MochaUI): JavaScript:

$('loginwindow_form').set('send', {
    "url": "auth/ajax_login",
    "method": "post",
    "onRequest": function () {
        $("loginWindow_spinner").show();
    },
    "onComplete": function (response) {
        $("loginWindow_spinner").hide();
    },
    "onSuccess": function (responseText, responseXML) {
        window.location = "appinit";
    },
    "onFailure": function (xhr) {
        MUI.notification('onFailure');
    }
});

$("loginwindow_form").addEvent("submit", function (e) {
    !e || e.stop();
    $('loginwindow_form').send();
});

xHTML (notice that the form does not have submit button - the button is elsewhere and has onclick action to send the form with given ID):

<iframe src="auth/blank" id="blankiframe" name="blankiframe" style="display:none"></iframe>
<form action="appinit" method="post" name="loginwindow_form" id="loginwindow_form" class="standardform" target="blankiframe">
    <input type="text" name="email" class="input text" id="loginwindow_form_email" />
    <input type="password" name="password" class="input text password" id="loginwindow_form_loginwindow_form_password" />
</form>

The sending button (in another, xhr loaded, element):

<button class="button" action="{sendForm: 'loginwindow_form'}">
    <div class="accept">Login</div>
</button>

I'm also looking for a solution. Did you find one? – denislexic Aug 31 '12 at 00:56 — denislexic, Aug 31 '12 at 00:56

score 2 · Answer 1 · answered Mar 04 '11 at 17:04

you really ought to post code. it's all very nice doing a .send in your callback, that's fine. still, you need to post how you handle the form and initiate submission in the first place.

the way it should work is if you intercept the form's submit method - but if you--say, have a button with a click handler, it won't be seen as a submission so it won't remember things. also, are you doing event.stop or .preventDefault?

score 1 · Accepted Answer · answered Mar 04 '11 at 17:09

I recomment that you use a traditional sumbit form, but submit into a hidden iframe. (Or the login form itself could be in an iframe). This way you can still send back JS responses to the iframe which will be executed, and the browsers will know that it was a login form.

Ajax login form - browsers won't save password

2 Answers2

Linked