检查数据库中是否存在电子邮件文本框值

Question

I want to check the value in text box is present in database and clear the box if the value exists in the database without refreshing the whole page.

HTML:

<p>Email<input type="text" name="email" id="email" size=18 maxlength=50 required></p>

Query:

$echeck="select email from register where email='$email'";
$echk=mysql_query($echeck);
$ecount=mysql_num_rows($echk);
if($ecount!=0)
{
    echo ("<SCRIPT LANGUAGE='JavaScript'>
    var asign=document.getElementById(email);   //now show null value
    asign.value="";                
    </SCRIPT>");
}

If I use alert it will refresh the page.

window.alert('Email Id already exist');

Answer 1

try to implement something like this:

<script type="text/javascript">
function checkMailStatus(){
    //alert("came");
var email=$("#email").val();// value in field email
$.ajax({
    type:'post',
        url:'checkMail.php',// put your real file name 
        data:{email: email},
        success:function(msg){
        alert(msg); // your message will come here.     
        }
 });
}

</script>

  <p>Email<input type="text" name="email" id="email" onblur="checkMailStatus()"size=18 maxlength=50 required></p>

your php: checkMail.php

$echeck="select email from register where email=".$_POST['email'];
   $echk=mysql_query($echeck);
   $ecount=mysql_num_rows($echk);
  if($ecount!=0)
   {
      echo "Email already exists";
   }

Answer 2

I'm not sure because I have always used JQuery, however I try:
Source: W3Schools

HTML file :

<script type="text/javascript">
function checkInput(){
            var email=document.getElementById('email').value.trim();
            if(email.length==0)
                 return;
            var xmlhttp=new XMLHttpRequest();
            xmlhttp.onreadystatechange=function(){
              if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    if(xmlhttp.responseText==0){
                        document.getElementById('email').value='';
                        alert('Email already exists');
                    }
                else if(xmlhttp.responseText==1){
                      document.getElementById('email').value='';
                      alert('Invalid Email');      
                }
            }
            xmlhttp.open("GET","check.php?email="+email,true);
            xmlhttp.send();

        }

</script>
//I would use check mail button, to prevent accindental unfocus
<p>Email<input type="text" name="email" id="email" onblur="javascript:checkInput();" size=18 maxlength=50 required></p>

check.php

//This is a simple input check
//The way you check the value isn't secure, you should sanitaze the input
// consider PDO or MySQLi

//Check if email otherwise stop php and clean input
if(!filter_var($_GET['email'], FILTER_VALIDATE_EMAIL)){
    echo '1';
    exit();
}

$echeck="select email from register where email='$_GET['email']'";
$echk=mysql_query($echeck);
$ecount=mysql_num_rows($echk);
if($ecount!=0){
    echo '0';
    exit();
}
else{
    echo '2';
}