Let browser remember input fields values in dynamically generated forms

Question

It's the normal thing to browser remember user and password information if the user actually clicked on the 'rember page password' (browser, not website feature).

I have this login form that I generate using an async call, something like:

$('#container').load('/path/file.php?what=login_form');

In this form, when submitted the browser doesn't remember (and autofill it for me) even if I clicked on 'yes, remember password'.

Does this mean that only URLable page forms will be remembered?

EDIT - output example

 <div class="caja loginBox">
        <form action="index.php" method="post" name="sesion" id="sesion">
        <h1>Inicio de sesion</h1><h2>Usuario</h2>
     <input type="text" id="nombre" name="nombre"/>
     <h2>Password</h2><input type="password" id="pass" name="pass"/><button type="submit" name="inicio">Entrar</button>
     </form> </div>

Answer 1

I found a solution that works with the Firefox password manager. Depending on why you are loading the form dynamically, my solution may or may not help you. (More on that below.)

First, put an invisible form (I used an inline style of "display:none") on the page that uses the same method and action, and contains fields with the same names. You can put this below the div that will eventually contain the real form:

<div id="container"></div>

<div id="fake-form" style="display: none">
    <form action="index.php" method="post">
        <input type="text" name='nombre' class='nombre'/>
        <input type="password" name='pass' class='pass' />
    </form>
</div>

Then, in your JavaScript, after the content of the real form has been loaded, copy the values out of the fake form and put them into the real one:

<script type="text/javascript">
    $(function() {
        $("#container").load("/path/file.php?what=login_form", function() {
            var fakeForm = $("#fake-form");
            $("#nombre").val(fakeForm.find(".nombre").val());
            $("#pass").val(fakeForm.find(".pass").val());
        });
    });
</script>

That said, if you're going through this much effort to put a form on the page before you dynamically load the actual form, then why not just remove that last step and have the form on the page to begin with? :-) Presumably you have a good reason for doing this though. Maybe the form coming from the server has unique styling information, or dynamic error messages next to the fields, or i18n field names?

However, if the form you're pulling from the server has an action that varies for different users, then my trick won't work because you have to know the action in advance when you build the hidden form.

If that's the case then maybe you could try my trick in reverse, and hide the "real form" you load from the server and display the fake form to the user. The fake form could post to a non-existant URL, but you could then use JavaScript to intercept the onsubmit of the "fake form", copy the username and password into the invisible "real form", invoke submit on the real form, and return false to prevent the original form submission from going through.

Update: After thinking about it a little more, I don't think my second solution would work, because the password managers almost definitely associate the username and password with the final URL that you actually submit the data to, rather than the initial action URL in the form that you would only be initially pretending to submit to. Anyway, hopefully my first solution will be adequate for what you're doing.