Skip to content

Instantly share code, notes, and snippets.

@kostiklv
Created May 12, 2011 16:53
Show Gist options
  • Save kostiklv/968927 to your computer and use it in GitHub Desktop.
Save kostiklv/968927 to your computer and use it in GitHub Desktop.
How to make browser's remember password work with dynamic/AJAX login form
<html>
<!--
This is an example of how to make browsers
offer to remember password and later fill in those passwords
for dynamic login forms.
To make the browser offer to remember passwords the form should be actually submitted.
Since we are handling login with AJAX we don't want the form to submit, so we are still submitting it
into a dummmy iframe with dummy URL.
It's good idea to actually create empty dummy.html file, otherwise you'll flood you error.log with 404s
To make the browser fill in/suggest login/password the login/password fields
should be loaded with the page, so we create a hidden form with login/password fields and later replace parts of
dynamically loaded login form with these fields.
(c) Konstantin Tjuterev / kostik.lv at gmail com
-->
<head>
<title>Test remember password</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function display_login_form_good()
{
// dyamically add the form -
// for simplicity it's hardcoded here, but it can be loaded by AJAX
// note the placeholders for login/password fields
$('#login').html(
'<h3>Remember password should WORK</h3>' +
'Email:<br/>' +
'<span id="email_place_holder"/><br/>' +
'Password:<br/>' +
'<span id="password_place_holder"/><br/>' +
'<input id="login-button" type="submit" value="Login"/>');
// replace placeholders with the actual fields from hidden div
$('#email_place_holder').replaceWith($('#email'));
$('#password_place_holder').replaceWith($('#password'));
// this is not required, just cleaning up
$('#dont_forget').remove();
// suppose our login is handled via AJAX
// so there is no direct submit
$('#login-button').click(function (ev) {
// do NOT call ev.preventDefault() or return false
// otherwise you will not get Remember Password prompt in IE and Chrome
alert('AJAX login...');
});
}
// This form will not work, since the fields are created dynamically
// and browsers don't offer saved passwords for such fields
function display_login_form_bad()
{
$('#dont_forget').remove();
$('#login').html(
'<h3>Remember password should NOT work</h3>' +
'Email:<br/>' +
'<input type="text" name="email" id="email"/><br/>' +
'Password:<br/>' +
'<input type="password" name="password" id="password"/><br/>' +
'<input type="submit" value="Login"/>');
}
</script>
</head>
<body>
<input type="button" value="Show good form" onclick="display_login_form_good()"/>
<input type="button" value="Show bad form" onclick="display_login_form_bad()"/>
<!-- Our dummy iframe where the form submits to -->
<iframe src="dummy.html" name="dummy" style="display: none"></iframe>
<form action="" method="post" target="dummy">
<div id="login">
</div>
</form>
<!--
This hidden div should be included in static page content.
Currently, browsers check for fields suitable for remembered passwords
only when page initially loads.
Later we simply move the fields from this div to actual form, where required
-->
<div id="dont_forget" style="display: none">
<form action="" method="post">
<input type="text" name="email" id="email"/>
<input type="password" name="password" id="password"/>
<input type="submit" value="Login" id="dummy_submit"/>
</form>
</div>
</body>
</html>
Copy link

ghost commented Jun 1, 2014

I did not take all the code, but the <iframe> stuff worked for Chrome. (Don't forget to tell you, that you had to refrain from calling preventDefault saved my life.) Thanks!!

@kyrylonazarenko
Copy link

Thanks

@billy1380
Copy link

I think you might be able to get away with

<iframe src="javascript:''" name="dummy" style="display: none"></iframe>

and no need for the dummy.html

@TeodorKolev
Copy link

Hey m8, why that code works on platforms like JSFiddle but it don't work on my localhost server?

@mkurz
Copy link

mkurz commented Oct 13, 2015

This has finally been fixed in Chrome 46! 🎉 No iframe hacks anymore!

Check out this example with descriptions.

If you are interested there are further examples in this repo. You can run it with node: node server.js.
Maybe also see the comments from this commit: mkurz/ajax-login@c0d9503)

If you need help let me know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment