Unable to show error text in a div after ajax success - php

Question

In my app I want to make a login page. I want do do this login using ajax jquery. If login success it navigate to next page or show a error message in a div.
this is my code
<form role="form">
<div class="form-group radio-inline">
<label><b>I Am</b></label>
<input type="radio" name="category" value="s"> Student
<input type="radio" name="category" value="t"> Teacher
<input type="radio" name="category" value="p"> Parent
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email address">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="password" placeholder="Enter password">
</div>
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</form>
<div id="error">
</div>
jquery
$(document).on('click','.btn',function() {
var email = $("#email").val();
var password = $("#password").val();
var category = $("input[name=category]:checked").val();
$.ajax({
url: "../logincheck.php",
type: "POST",
data: {category:category,email:email,password:password},
success:function(data) {
if (data==='studentlogin') {
window.location.href = '../student/index.php';
}
if(data==='teacherlogin'){
window.location.href = '../teacher/index.php';
}
if(data==='teachersubject') {
window.location.href = '../teacher/subjectadd.php';
}
else {
window.location.href = 'login.html';
$("#error").html("Invalis Email/Password");
}
}
});
});
logincheck.php
$category=$_POST['category'];
$email=$_POST['email'];
$pwd=$_POST['password'];
if ($category == 's') {
$result=mysqli_query($conn,"SELECT studentid,studentfname FROM studentinfo WHERE emailid='$email' and pwd='$pwd'");
$res=mysqli_fetch_array($result);
if($res[0]>0){
$_SESSION['snstudentid']=$res[0] ;
$_SESSION['snstudentfname']=$res[1] ;
echo "studentlogin";
//header("location:student/index.php");
exit();
}
else{
echo "error";
//header("location:pages/login.html");
}
} elseif ($category == 't') {
$result=mysqli_query($conn,"SELECT teacherid,teacherfname FROM teacherinfo WHERE emailid='$email' and pwd='$pwd'");
$res=mysqli_fetch_array($result);
if($res[0]>0){
$check_subject = mysqli_query($conn, "SELECT count(teachersubjectid) FROM teachersubject WHERE teacherid='$res[0]'");
$subject_result = mysqli_fetch_array($check_subject);
if ($subject_result[0]>0) {
$_SESSION['snteacherid']=$res[0];
$_SESSION['snteacherfname']=$res[1];
echo "teacherlogin";
//header("location:teacher/index.php");
exit();
} else {
$_SESSION['snteacherid']=$res[0];
$_SESSION['snteacherfname']=$res[1];
echo "teachersubject";
//header("location:teacher/subjectadd.php");
exit();
}
} else{
echo "error";
//header("location:pages/login.html");
}
}
that error message show for few second and then it goes.I do that error class style display:none;
How I do that?Please help me.

Answer 1

Have a look at what this code does:
else {
window.location.href = 'login.html';
$("#error").html("Invalis Email/Password");
}
yes, it redirects the page to login.html, then, while the page is loading it puts up the error message, then the page load completes and, in your initial login page, the error message is empty.
Remove the line:
window.location.href = 'login.html';
assuming you are already on login.html.

Answer 2

If <div id="error"> has a style of display:none;, then its contents will not be displayed. Inside of the ajax success callback, $("#error").html("Invalis Email/Password"); needs to be $("#error").html("Invalis Email/Password").show(); to set display:block;. See .show().