Do browsers support autocomplete for ajax loaded l

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: 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'm not happy with loading the login form into my page at load time so I filed a issue with Chrome instead;

http://code.google.com/p/chromium/issues/detail?id=123955&thanks=123955&ts=1334713139

Answer 3

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 4

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 5

there is answer given : http://www.webmasterworld.com/javascript/4532397.htm . it does something with submit method and then uses click method. as i know values are not saved if form is not submitted. i think author of that solution just makes it submitted though submit button is not clicked by user.

Answer 6

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, ex:

<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.