Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
@rudevich

This comment has been minimized.

Copy link

@rudevich rudevich commented Sep 20, 2013

thanks bro ;)

@ghost

This comment has been minimized.

Copy link

@ghost 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

This comment has been minimized.

Copy link

@kyrylonazarenko kyrylonazarenko commented Nov 5, 2014

Thanks

@billy1380

This comment has been minimized.

Copy link

@billy1380 billy1380 commented May 11, 2015

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

This comment has been minimized.

Copy link

@TeodorKolev TeodorKolev commented May 19, 2015

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

@mkurz

This comment has been minimized.

Copy link

@mkurz 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
You can’t perform that action at this time.