Saving passwords submitted by jQuery $.post function

Today I was struggling with “How can I make Chrome show the remember password form after I use a AJAX submit approach then after a success result redirect to a successful login page?” and it took my one hour to figure it out. I couldn’t find many solutions on the blogs that satisfied me on forums etc. so I wanted to write my own solution here.

First, assume you have a form like this:

<form id="loginform">
    <input name="username" type="text" />
    <input name="password" type="password" />
    <input type="submit" value="Log in" />
</form>

and your AJAX login javascript etc..

And you would like to submit it to “login.php” (or login.aspx – doesn’t matter), after successful login you want to redirect to “main.php”, here’s the trick:

1. point your form’s action to “main.php” (there wouldn’t be any database checking or field validation just opening the post-login page)

2. move the onsubmit=”return Login” part to input type=submit as onclick=”” event.

3. then change your javascript code like this

    function Login(){
        $.post("login.php",$("#loginform").serialize(),function(data){
	    if(data=="OK"){ //I assume you're returning "OK" after login from login.php
		$("#loginform").submit();
	    }else{
		//write your error showing statements here
            }
        }
    }

this way, you’re actually setting a session or cookie in “login.php” to state that your user has been successfully logged on and you just need to check that session or cookie at “main.php” if the user really is logged in. If not, just redirect the user to the login form to prevent misleads to main.php.

Leave a Reply

Your email address will not be published. Required fields are marked *

Last.fm RPS

Follow me on Twitter

GiottoPress by Enrique Chavez

%d bloggers like this: