I have this following problem where i am trying to create a login form. Where a small bootstrap alert will be shown when the user enter the wrong userID/Password.
When the credentials are entered correctly then it is being redirected but when enter the wrong details then the page is being reloaded.
<?php
$db=mysqli_connect('localhost','root','','hotel');
if(isset($_POST['user_id'])) {
session_start();
$user_id = $_POST['user_id'];
$password = $_POST['password'];
$user_check = "select * from users where user_id = '$user_id' and password ='$password'";
$result = mysqli_query($db, $user_check)
or die("failed to query database" . mysqli_error());
$row = mysqli_fetch_array($result);
if ($row['user_id'] == $user_id && $row['password'] == $password) {
$_SESSION['user_id'] = $_POST['user_id'];
header('Location: reservation.php');
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<link rel="stylesheet" href="login_style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="carousel-example-generic">
<div class="container">
<div class="loginbox form-group bg-dark">
<div class="text-light">
<h1 class="text-center" style="padding-bottom: 5px">LOGIN</h1>
<form id="loginForm" action="" method="post" >
<p class="font-weight-bold">User ID</p>
<input type="text" id="user_id" name="user_id" placeholder="Enter Username" required>
<br><br>
<p class="font-weight-bold">Password</p>
<input type="password" id="password" name="password" placeholder="Enter Password" required>
<br><br><br>
<div id="alertLogin" class="alert-danger" style="visibility:hidden">
<p>The User ID or the Password is incorrect</p>
</div>
<input id="loginButton" type="submit" name="submit" value="Login">
<br>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function(e) {
e.preventDefault();
window.history.back();
var a1 = <?php $row['user_id']?>;
var b1 = <?php $row['password']?>;
var a2 = $('#user_id').val();
var b2 = $('#password').val();
if (a1 != a2 || b1 != b2) {
$('#alertLogin').attr('style', 'visibility:visible');
}
})
</script>
</body>
</html>
window.history.back(); is reloading the page everytime it is reached, what are you intending to do here? Besides, the code below that, doen't seem to work to me, if the page has been reloaded #user_id and #password have no value, for the line var a1 = <?php $row['user_id']?>; to work, you should wrap the php code between quotes, otherwise js will interpret it as a variable. I don't know if the comparsion between a1, a2, b1 & b2 makes a lot of sense, the login hasn't failed because those values are not equal, it has failed because the values on your database don't match with the ones entered by the user. And one last thing, you should encrypt your passwords before saving them to the database and use mysql_real_escape_string() to avoid injection problems.
And here is one possible solution (not tested)
<?php
session_start();
$db=mysqli_connect('localhost','root','','hotel');
$login_error = false;
if(isset($_POST['user_id'])) {
$user_id = mysql_real_escape_string($_POST['user_id']);
$password = mysql_real_escape_string($_POST['password']);
$user_check = "select 1 from users where user_id = '$user_id' and password ='$password'";
$result = mysqli_query($db, $user_check)
or die("failed to query database" . mysqli_error());
if ( mysqli_num_rows($result) > 0 ) {
$_SESSION['user_id'] = $_POST['user_id'];
header('Location: reservation.php');
}else
{
$login_error = true;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<link rel="stylesheet" href="login_style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="carousel-example-generic">
<div class="container">
<div class="loginbox form-group bg-dark">
<div class="text-light">
<h1 class="text-center" style="padding-bottom: 5px">LOGIN</h1>
<form id="loginForm" action="" method="post" >
<p class="font-weight-bold">User ID</p>
<input type="text" id="user_id" name="user_id" placeholder="Enter Username" required>
<br><br>
<p class="font-weight-bold">Password</p>
<input type="password" id="password" name="password" placeholder="Enter Password" required>
<br><br><br>
<?php if($login_error){ ?>
<div id="alertLogin" class="alert-danger" style="visibility:hidden">
<p>The User ID or the Password is incorrect</p>
</div>
<?php } ?>
<input id="loginButton" type="submit" name="submit" value="Login">
<br>
</form>
</div>
</div>
</div>
</body>
</html>