Problem with Ajax login form
I'm having some trouble with getting this login form to work properly. I'm trying to validate it with server side php through a jquery ajax call.
HTML code
- <form action="login.php" method="post" id="login-form">
<label for="user">user:</label><input type="text" name="user" id="user" value="<?php print $user; ?>" /><br/>
<label for="user">pass:</label><input type="password" name="pass" id="pass" value="" />
<input type="submit" value="enter" id="submit" class="submit" />
</form>
Here is the jquery code.
- $("#submit").click(function(){
$("#error").hide();
var hasError = false;
var output = '';
var user = $("#user").val();
var pass = $("#pass").val();
if(user == '' || pass == ''){
output += '<li>Please fill out both fields</li>';
hasError = true;
}
if(!hasError){
$.post(
'verify.php',
{username: user, password: pass},
function(data){
if(data.error){
hasError = true;
output += data.errorMessage;
$("#error").html('<ul>' + output + '</ul>');
$("#error").show();
}
if(data.succes){
hasError = false;
location.reload();
}
},
'json'
);
}
if(hasError){
$("#error").html('<ul>' + output + '</ul>');
$("#error").show();
}
return false;
});
And here is the PHP code.
- <?php
include('includes/db_login.inc');
$data = array();
$user = $_POST['username'];
$pass = md5($_POST['password']);
$query = mysql_query("SELECT * FROM user WHERE name='$user' AND pass='$pass'");
$count = mysql_num_rows($query);
if($count == 0){
$data['errorMessage'] = '<li>Incorrect login</li>';
$data['error'] = true;
} else {
$data['succes'] = true;
session_start();
$_SESSION['user'] = $user;
}
echo json_encode($data);
?>
Now, this form works fine when I enter a valid login at first. But when I first enter a wrong login, I get the error message, but when I enter the correct login after this it doesn't work anymore.