After I type the input the textbox shows again in and I don’t know how to fix. Here’s the screen shot of the output:

Is shows again after the on blur
Here’s my code, and I don’t know how to fix this. though my function works well
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Amateur</title>
<link rel="stylesheet" href="css/reset.css" type="text/css">
<script src="http://code.jquery.com/jquery-1.8.0.js"></script>
<script>
function check_email() {
var email=$("#txtEmail").val();
$.ajax(
{
type:"POST",
url:"index.php",
data: "email="+email,
success:function(msg) {
$("#chkEmail").html(msg);
}
});
return false;
}
</script>
</head>
<body>
<form method="post">
<label for="txtEmail">E-mail:</label>
<input id="txtEmail" name="email" type="email" onblur="return check_email()">
<label id="chkEmail" for="txtEmail"></label>
<?php
if(isset($_POST['email']))
{
$user='root';
$pdo=new PDO('mysql:host=localhost;dbname=class;charset=utf8',$user);
$email=$_POST['email'];
$stmt=$pdo->prepare('SELECT user_email from tbl_users WHERE user_email=:email LIMIT 1');
$stmt->execute(array(':email'=>$email));
if($stmt->rowCount()>0) {
echo 'E-mail already use.';
}
else {
echo 'E-mail not use.';
}
}
?>
</form>
</body>
</html>
Change your code like this. The issue is you POST the data to the same page your are in and you get the whole code as the response for you AJAX request. So if you exit the execution on POST you will only get the relevant message.