title: Do browsers support autocomplete for ajax loaded login forms at all?
body: <p>My problem is, that the browsers' (IE&amp;FF) autocomplete does not work for my login form.</p>
  
  <p>I have a webapp with CakePHP &amp; 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.)</p>
  
  <p>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?</p>
  
  <p>That you can test it yourself, here is a simple AJAX login form:</p>
  
  <p><a href="http://gablog.eu/test/ajaxlogin.html" rel="nofollow noreferrer">http://gablog.eu/test/ajaxlogin.html</a></p>
  
  <p>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:
  <a href="http://gablog.eu/test/loginform.html" rel="nofollow noreferrer">http://gablog.eu/test/loginform.html</a></p>
  
  <p>The layout:</p>
  
  <pre><code>&lt;div id="user-bar"&gt;
      &lt;script type="text/javascript"&gt;
          $(function() {
             $("#user-bar").load('loginform.html').html();
          });
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The view loaded (when not logged in):</p>
  
  <pre><code>&lt;form id="form-login" action="" onsubmit="login(); return false;"&gt;
      &lt;input type="text" id="username" name="username"/&gt;
      &lt;input type="password" id="password" name="password"/&gt;
      &lt;input type="submit" value="Login"/&gt;
      &lt;div id="login-error" class="error-message"&gt;&lt;/div&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
      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");
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>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. <strong>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!</strong> (The test site does not use jQuery submission.) Related question: <a href="https://stackoverflow.com/questions/1622628/browser-autocomplete-saved-form-not-work-in-ajax-request">browser autocomplete/saved form not work in ajax request</a></p>