I have created a login page which is working fine but the issue I'm facing is when I enter an invalid username, name or password.
It should show "invalid username or password" without loading the page, that is what AJAX is used right? But instead, when I enter an invalid username name or password, it is showing an error that the username name or password is invalid by loading the page which is not acceptable in case of AJAX.
Can anyone help me fix this issue that the error message should be shown without reloading of the page?
login.php:
<?php
session_start();
$mysqli = mysqli_connect("localhost","root","","ajax1");
if (isset($_SESSION['id'])){
header('location:welcome.php');
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title> login script with ajax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body style="background-color:#b3ffff">
<div style="padding-left:500px ; padding-top:200px">
Username: <input id="username" type="text" name="username" placeholder="username"><br><br>
Password: <input id="password" type="password" name="password" placeholder="Password"><br><br>
<input id="submit" name="submit" type="button" value="Log In">
<p style="color:black">Havent Registered Yet? <a href="index.php">Register</a>.</p><br><br>
<div id="display" style="color:red"></div>
<script>
$(document).ready(function(){
$("#submit").click(function(){
var username = $("#username").val();
var password = $("#password").val();
var datastring = 'username=' + username + '&password=' + password;
if(username=='' || password==''){
$("#display").html("Please Enter All The Fields");
}
else{
$.ajax({
type: "POST",
url: "success.php",
data: datastring,
cache: false,
success: function(result){
$("#display").html(result);
window.location = "welcome.php";
}
});
}
return false;
});
});
</script>
</div>
</body>
</html>
success.php:
<?php
$mysqli = mysqli_connect("localhost","root","","ajax1");
session_start();
if (isset($_SESSION['id'])){
header('location:welcome.php');
}
$myusername = mysqli_real_escape_string($mysqli,$_POST['username']);
$mypassword = mysqli_real_escape_string($mysqli,$_POST['password']);
$sql = "SELECT * FROM users WHERE username = '$myusername'";
$result = mysqli_query($mysqli,$sql);
$row = mysqli_fetch_array($result);
$hashed_password=$row['password'];
if(password_verify($mypassword, $hashed_password)) {
$_SESSION['login_user'] = $myusername;
$_SESSION['id']=$row['userid'];
echo'Successfully Registered';
exit();
}
else
{
echo'Invalid username or password';
}
?>
welcome.php:
<?php
session_start();
if (!isset($_SESSION['id'])) {
header('location:login.php');
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="Padding-left:200px; padding-top:100px">
<?php
$mysqli = mysqli_connect("localhost","root","","ajax1");
$query=mysqli_query($mysqli,"select * from `users` where userid='".$_SESSION['id']."'");
$row=mysqli_fetch_array($query);
echo 'Welcome - '.$row['username'];
?>
<br><br>
<a href="logout.php">Logout</a>
<br><br>
<div class="panel panel-primary" style="width:56%">
<div class="panel-heading text-center">STUDENT'S DETAILS</div>
</div>
<div class="container text-center">
<?php
$mysqli = mysqli_connect("localhost","root","","ajax1");
if (!isset($_POST["happy"])) {
$result = mysqli_query($mysqli, "SELECT * FROM users");
} else {
$search = mysqli_real_escape_string($mysqli, $_POST["happy"]);
$result = mysqli_query($mysqli, "SELECT * FROM users where department like '%$search%'");
} if(mysqli_num_rows($result) > 0) {
echo "<table border='1' class='text-center' >
<tr>
<th>USER_ID</th>
<th>USERNAME</th>
<th>E-MAIL</th>
<th>NAME</th>
<th>AGE</th>
<th>DATE_OF_BIRTH</th>
<th>DEPARTMENT</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['userid'] . "</td>";
echo "<td>" . $row['username'] . "</td>";
echo "<td>" . $row['email'] . "</td>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['age'] . "</td>";
echo "<td>" . $row['date_of_birth'] . "</td>";
echo "<td>" . $row['department'] . "</td>";
echo "</tr>";
}
echo "</table>";
}
else{
echo 'Sorry no record found';
}
?>
</div>
<div class="container form-group">
<br><br>
<form method="post">
<label class="control-label" style="color:blue">Select :</label>
<select name="happy" style="margin-left:14px; color:black;">
<option disabled selected value> -- select an option -- </option>
<option value="EE">Electrical & Electronics</option>
<option value="EC">Electronics & Communication</option>
<option value="ME">Mechanical</option>
<option value="CS">Computer Science</option>
<option value="CV">Civil</option>
<option value="IS">Information Science</option>
</select>
<input type="submit" value="submit">
</form>
</div>
</div>
</body>
</html>
