Ajax Login validation using PHP and jQuery

[ben_ford]

Hi there, I am using the jQuery, Ajax PHP code which is given at http://roshanbh.com.np/2008/04/ajax-login-validation-php-jquery.html

 

The form I am using, which is in index.html, is:

	<form method="post" action="" name="login" id="login_form">
                    <div class="field_row">
                        <div class="label_container">
            				<label>Email</label>                        
                        </div>
                        <div class="field_container">
            				<input type="text" placeholder="login with your email address..." name="email_address" id="email_address" value="" class="large" />                        
                        </div>
        				<div class="clear"><span class="nodisp"> </span></div>							
        			</div>

        			<div class="field_row">
        			    <div class="label_container">
            				<label>Password</label>    			     
        			    </div>
        			    <div class="field_container">
            				<input type="password" placeholder="...and password" name="password" id="password" value="" class="large" />    			     
        			    </div>
        				<div class="clear"><span class="nodisp"> </span></div>						
        			</div>
                
                    <div class="final_row">
                        <input type="image" src="images/login_blue.gif" id="user_login_button" name="user_login_button" value="login" id="submit" class="submit_button" />
                        <div class="final_row_text_container" >
						<a href="/login/forgot_password" style="color: #008ee8;" class="small_text">Forgot your Password?</a>
                        <br />
					<span id="msgbox" style="display:none"></span>
					</div>
                    </div>
				<div class="clear"><span class="nodisp"> </span></div>						

                </form>

 

The Javascript, which is situated in the head of index.html. is:

<script language="javascript">
$(document).ready(function()
{
$("#login_form").submit(function()
{
	//remove all the class add the messagebox classes and start fading
	$("#msgbox").removeClass().addClass('messagebox').text('Validating....').fadeIn(1000);
	//check the email address exists or not from ajax
	$.post("login_ajax.php",{ email_address:$('#email_address').val(),password:$('#password').val(),rand:Math.random() } ,function(data)
        {
	  if(data=='yes') //if correct login detail
	  {
	  	$("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
		{ 
		  //add message and change the class of the box and start fading
		  $(this).html('Logging in.....').addClass('messageboxok').fadeTo(900,1,
              function()
		  { 
		  	 //redirect to secure page
			 document.location='secure.php';
		  });
		  
		});
	  }
	  else 
	  {
	  	$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
		{ 
		  //add message and change the class of the box and start fading
		  $(this).html('Your login details are incorrect.').addClass('messageboxerror').fadeTo(900,1);
		});		
          }

        });
		return false; //not to post the  form physically
});
//now call the ajax also focus move from 
$("#password").blur(function()
{
	$("#login_form").trigger('submit');
});
});
</script>

 

And the PHP, in login_ajax.php, is:

<?php session_start();

$host =  "localhost";
$user = "bford";
$pass = "bford";
$db = "bford";

$link = mysql_connect($host, $user, $pass);
	if (!link) 
	{
	die('<strong>Error(s) occured:</strong> Could not connect: ' . mysql_error());
	}

$db_selected = mysql_select_db($db, $link);
	if (!db_selected) 
	{
	die ('<strong>Error(s) occured:</strong> Cant use bford: ' . mysql_error());
	}

//get the posted values
$email_address=$_GET['emailaddress'];
$pass=$_GET['password'];

//now validating the username and password
$sql="SELECT * FROM users WHERE email_address='".$email_address."'";
$result=mysql_query($sql);
$row=mysql_fetch_array($result);

//if username exists
if(mysql_num_rows($result)>0)
{
//compare the password
if($row["password"],$pass)==1
{
	echo "yes";
	//now set the session from here if needed
	$_SESSION["user_name"]=$userID; 
}
else
	echo "no"; 
}
else
echo "no"; //Invalid Login


?>

 

I have been working on this for days now, changing around the form names, database table names, php variables, allsorts! I still cannot get it functioning properly. When I input a correct email_address and password combination, the 'Your login details are incorrect.' message still appears.

 

Help would be much appreciated.

 

Ben.

[spiderwell]

you are POSTing the variables to login_ajax.php and it is using $_GET to retrieve them