I first turned to Stack Overflow and found this thread. They gave me some good direction, but no one had a clear answer. It seems that everyone implements this a little differently. For example, if you’re not redirecting them anywhere after the form is submitted, you need to implement the iFrame solution (I think).

A little bit more about my particular situation. I used backbone.js to inject all of my HTML into the page after page load using underscore.js templates. This is fairly standard practice.

However, what I found out is that in order for the browser to know to prompt you to save your password, it has to be aware of the actual form existing in the HTML. I guess that since I was dynamically injecting my login form after page load, then the browser wasn’t aware of it.

Solution

Embed the HTML for your form directly into your HTML page. I still used backbone.js to attach my backbone view to that HTML, but I cut out using the underscore.js template for the form.

Caveats

• Make sure that your form is still submitting to a real page. In this case, I am using action=”app”
• Make sure that you have name=”username” and name=”password” on your form fields to help the browser know that it’s a log in form
• Attach your AJAX validation to the click event of the form’s submit button, and then once the credentials have been validated, call the submit() method on the form itself.

Let me know if this helps you find a solution. If you think I came up with a good solution, then please take a moment to vote on my answer over at stackoverflow.com.

You can check it out at http://m.nodeable.com but you’ll need a beta account which you can get from here: https://beta.nodeable.com.

How did I accomplish this? Lots and lots of CSS. Know how to use your border radius, gradients, box shadows, and sprites. Here are some links that might help you.

• Border Radius: http://border-radius.com/
• Gradients: http://www.colorzilla.com/gradient-editor/
• Box Shadow: http://www.css3.info/preview/box-shadow/
• Sprites: http://css-tricks.com/css-sprites/

Another Hint: