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.
