Im currently learning my way with ajax. Im trying to make a register / login system with AJAX. I finished the register form and is now working but im having problems with the login one.
ajax/login.php PHP Vaidation for Login
<?php
require_once("../core/config.php");
$username = trim(strip_tags($_POST['username']));
$password= trim(strip_tags($_POST['password']));
$errors = false;
$user_query = $db->query("SELECT * FROM users WHERE username='$username'");
// Empty check -> Username
if(empty($username) && strlen($username) == 0) { $error_username = "<span style='color:red;'> Username is empty </span>"; $errors = true; }
// Empty check -> Password
if(empty($password) && strlen($password) == 0) { $error_password = "<span style='color:red;'> Password is empty </span>"; $errors = true; }
// If exists check
$num = $user_query->num_rows;
if($num < 1) { $error_general = "<span style='color:red;'> User doesn't exist </span>"; $errors = true; } else {
$user = $user_query->fetch_object();
if($user->password != $password) { $error_general = "<span style='color:red;'> Invalid Username or Password </span>"; $errors = true; }
}
//
if($errors == true) {
?>
<?php if(isset($error_general)) { echo $error_general." <br><br>"; } ?>
<?php if(isset($error_username)) { echo $error_username; } ?>
<input type="text" name="login_username" id="login_username" placeholder="Username" value="<?php echo $username; ?>"> <br>
<?php if(isset($error_password)) { echo $error_password; } ?>
<input type="password" name="login_password" id="login_password" placeholder="Password" value="<?php echo $password; ?>">
<br>
<?php } else {
$_SESSION['User'] = true;
header("Location: ". $_SERVER['PHP_SELF']);
}
?>
index.php Form HTML & JS
<!DOCTYPE HTML>
<html>
<head>
<script src="js/jquery.js"></script>
<script>
var loader = $("<div style='text-align: center; float:none; margin: 0 auto;'> <img src='loader-small.gif'> <br> Processing request... </div> <br>");
function process_login() {
var username = $("#login_username").val();
var password =$("#login_password").val();
$(".login_container").html(loader).load("ajax/login.php", {username: username, password: password})
}
</script>
</head>
<body>
<h3> Login </h3>
<form action="" method="POST">
<div class="login_container">
<input type="text" name="login_register" id="login_username" placeholder="Username"> <br>
<input type="password" name="login_password" id="login_password" placeholder="Password">
<br>
</div>
<input type="submit" onclick="process_login(); return false;" name="login_submit" value="Login" style="outline:none;">
</form>
</body>
</html>
When I submit the form with the correct information I get "User doesnt exist", "Username is empty", "Password is empty" and when I submit with wrong information I get "User doesnt exist"
I've been brainstorming for the last 3 hours, yet I have not found a way to fix it
Logical error:
// Empty check -> Username
if(empty($username) || strlen($username) == 0) { $error_username = "<span style='color:red;'> Username is empty </span>"; $errors = true; }
// Empty check -> Password
if(empty($password) || strlen($password) == 0) { $error_password = "<span style='color:red;'> Password is empty </span>"; $errors = true; }
Compare to you code:
// Empty check -> Username
if(empty($username) && strlen($username) == 0) { $error_username = "<span style='color:red;'> Username is empty </span>"; $errors = true; }
// Empty check -> Password
if(empty($password) && strlen($password) == 0) { $error_password = "<span style='color:red;'> Password is empty </span>"; $errors = true; }