Do browsers support autocomplete for ajax loaded login forms at all?

Question

My problem is, that the browsers' (IE&FF) autocomplete does not work for my login form.

I have a webapp with CakePHP & jQuery. To allow visitors to login/register unobtrusively. The login form is inside a div, which is loaded via AJAX. (This enables logging in without a page reload.)

The browsers do recognize it as a login field, as they prompt me to save the credentials when clicking login. And they really do save the username/password, as they appear between the saved ones in the browser settings. But the saved username/password is never entered automatically. They do not appear pre-entered when the page loads. When I start typing in the username, the username appears as a suggestion, but even when you select it, the password is not entered next to it. Why? How can I get this working?

That you can test it yourself, here is a simple AJAX login form:

http://gablog.eu/test/ajaxlogin.html

It loads the following login form, if you go to the url below, autocomplete will work for just the plain form, so it is not a problem with the form itself, but rather that it is AJAX loaded: http://gablog.eu/test/loginform.html

The layout:

<div id="user-bar">
    <script type="text/javascript">
        $(function() {
           $("#user-bar").load('loginform.html').html();
        });
    </script>
</div>

The view loaded (when not logged in):

<form id="form-login" action="" onsubmit="login(); return false;">
    <input type="text" id="username" name="username"/>
    <input type="password" id="password" name="password"/>
    <input type="submit" value="Login"/>
    <div id="login-error" class="error-message"></div>
</form>

<script type="text/javascript">
    function login() {
        $.post('/ajax/login', $("#form-login").serialize(), function(data) {
            if (data.success) {
                $("#user-bar").load('userbar.html').html();
            } else {
                $("#login-error").html(data.message);
            }
        }, "json");
    }
</script>

To clarify: I do not want to use AJAX autocomplete, I want the browser's autocomplete to work for my login form. This is an issue between my form and the browser. jQuery submission seems to play a minor role, as the usernames/passwords are saved. They are just not auto-entered for ajax loaded HTML elements! (The test site does not use jQuery submission.) Related question: http://stackoverflow.com/questions/1622628/browser-autocomplete-saved-form-not-work-in-ajax-request

Answer 1

In case it helps, msdn says (towards the bottom of the page):

Note: if both of the following conditions are true:

• The page was delivered over HTTPS
• The page was delivered with headers or a META tag that prevents caching

...the Autocomplete feature is disabled, regardless of the existence or value of the Autocomplete attribute. This remark applies to IE5, IE6, IE7, and IE8.

I've emboldened the interesting bit.

.

Answer 2

I don't think you can get the form autocomplete to work if you load the form via ajax (security-wise I don't know if it can be really be abused or not, but the fact that a script could start loading fields into the page to see what data gets inserted doesn't look too good to me).

If you can, the best option would be to add a conditional block to the php file and include the form or not depending on whether the user is logged or not. If for some reason you can't do that, you might want to try to do a document.write() instead of the ajax call (and yes, using document.write is ugly :)

Answer 3

Autocomplete, in Firefox at least, triggers during page load. Adding the content afterwards would miss the window of opportunity.

A login form is tiny. I'd include it in the page from the outset and consider hiding it with CSS until it is wanted.

Answer 4

I see case when login form has to be pulled with ajax - if rest of the website loads as static html (cache). Login form (or authed user info) cant be displayed statically.

So your solution is to pull the form right after declaration (end tag) of the DOM element that serves as parent element for ajax-pulled loginform's html. Like (html tags replaced with []):

[div id="loginforms_parent"][/div][script language="javascript"]/ajax request and insert into DOM/[/script]

And browser has the form in DOM onLoad. Tested, firefox does autocomplete in that case.