Ajax login forms working with browser password remember features

Question

I have an ajax based login form for my site and have noticed that browsers are not recognising it as a login form and are not remembering passwords for it to ease the user's login.

When the submit button is pressed the values and sent to serverside to check and a response is sent back. If the check passes the the session is set and the page performs a javascript redirect into the members area. The html is very simple and could be the cause of the problem.

HTML:

<input type='text' class='email'>
<input type='password' class='password'>
<a class='submitBtn'>SUBMIT</a>

Thanks guys!

score 2 · Answer 1 · edited Jun 30 '11 at 16:16

2

I think I'll do it in another way.

Using a form to submit to a hidden iframe , so the window will act like ajax post(do not refresh the window) and the password remember feature will works

like

    <form method="post" id="" action="checkDetail.php" target="myIframe">

        <input type='text' class='email'>
        <input type='password' class='password'>
        <input type="submit" name="" value="" id="Submit"/>
    </form>
    <iframe name="myIframe" id="myIframe"></iframe>

in this way you have to change a little bit of your response code to notice iframe parent the submit result.

update

it will done automatically by browser. If a form specify 'target' attribute , and there is a iframe has a name attribute that exactly the same as the target attribute of the form, the form action will submit to the iframe.

so when your request is success , your response will appear in the iframe content. Try code like this in the response.

<?php
//php checks database here
?>

<script>
    parent.formSuccess({
        //your response infomation
    });
</script>

and define a formSuccess method in the outer page to handle the submit callback

edited Jun 30 '11 at 16:16

wilsonpage

17,341
23
103
147

answered Jun 30 '11 at 12:57

demix

76
7

Can you give an example of what the javascript/jquery would look like? – wilsonpage Jun 30 '11 at 14:05
This looks like an interesting method @demix! Where do I put my PHP code that check the email and password against the db? Do I specify a path to a .php file as the src of the iframe? – wilsonpage Jun 30 '11 at 15:26
Or am I right in thinking that the iframe will just pass the variables back to the parent window to check via an ajax call and redirect the parent window.location if successful? I am going to be using the same submit button to submit 3 different forms depending on the choice of the user, is this going to be an issue? – wilsonpage Jun 30 '11 at 15:38
Just specify the action attribute of the form, it can just be your original ajax request url. Then modify your response from json to a html file include the script above. – demix Jun 30 '11 at 15:42
Ok so I include the javascript snippet you posted above as the response and that javascript will be called by the iframe when it is loaded in? See edits I have made to your example... – wilsonpage Jun 30 '11 at 15:55
@ demix I found this solution: http://www.codingforums.com/showthread.php?t=123007 what do you think? – wilsonpage Jun 30 '11 at 16:17
http://stackoverflow.com/questions/2382329/how-can-i-get-browser-to-prompt-to-save-password – wilsonpage Jun 30 '11 at 16:19
It will work! And you won't change your code.I haven't thought that before. Magic solution. XD. But I think that method will get a little confuse when other maintain your code. – demix Jul 01 '11 at 03:25
the problem with this is that if you're using javascript to hash the password for security (so no one knows it but the client), this solution subverts that security, by sending the password over the wire as is. – Erik Aronesty Nov 26 '13 at 17:07

score 0 · Accepted Answer · edited May 23 '17 at 12:19

Found answer on stack : How can I get browser to prompt to save password?

My Version:

<form id='loginForm' target="passwordIframe" method='POST' action="blank.php">
<input name='email' type='text' st='Email'>
<input name='pass' type='password' st='Password'>
<button type='submit'>LOGIN</button>    
</form>
<iframe id="passwordIframe" name="passwordIframe" style='display:none'></iframe>

I can confirm that this triggers the password remember features for Chrome (other browsers not yet tested). It is important that the action attribute points to a blank.php. I chose a blank php page and echoed out the $_POST array just to make sure that the values were being submitted via the form.

I will now implement this with my old code that simply uses javascript to pull the values out of the field and checks them via an ajax call. I wonder if I can do away with the submit button all together and just use javascript to submit the form?

Ajax login forms working with browser password remember features

2 Answers2