PHP Technical

Check Email is Already Registered in Database using Ajax and JavaScript.

Ankit

Hey,Welcome to shortlearner, today we will see how to check that email is already registered in database, with the use of ajax and java-script.
Most of the time we see that the user is registering same  email id  in database and it is registered in the database without checking that it was already registered in database.

but with the help of ajax and java-script we can show our users that their email is registered or not registered in our database by showing them a message.

Also Read :
PHP Login Script With Remember me.
Change password using javascript, php and mysqli.
Password and Confirm Password Validation Using JavaScript
Check Email is Already Registered in Database using Ajax and JavaScript.
How to hide extension of html and php file.?

This will help to prevent redundancy of data in our database.
In this tutorial we will use maxcdn classes of bootstrap , AJAX and JavaScript for maximize output.
put the below maxcdn classes of bootstrap inside the head section of your html code.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
.white{
    color:#000;
    background-color:#fff;
}
.btn-facebook {
    color: #ffffff;
    -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #2b4b90;
    *background-color: #133783;
    background-image: -moz-linear-gradient(top, #3b5998, #133783);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3b5998), to(#133783));
    background-image: -webkit-linear-gradient(top, #3b5998, #133783);
    background-image: -o-linear-gradient(top, #3b5998, #133783);
    background-image: linear-gradient(to bottom, #3b5998, #133783);
    background-repeat: repeat-x;
    border-color: #133783 #133783 #091b40;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b5998', endColorstr='#ff133783', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
    .btn-facebook:hover,
    .btn-facebook:focus,
    .btn-facebook:active,
    .btn-facebook.active,
    .btn-facebook.disabled,
    .btn-facebook[disabled] {
        color: #ffffff;
        background-color: #133783 !important;
        *background-color: #102e6d !important;
    }
    .btn-facebook:active,
    .btn-facebook.active {
        background-color: #0d2456 9 !important;
    }

we use external stylesheet in this tutorial, so put the above css in the head section of your html code..

Index.php

<!DOCTYPE html>
<html>
<head>
  <title>Check Email is Already Registered </title>
<style type="text/css" href="css/style.css"></style>
</head>
<body>
<div>
    <div>
      <div>
        <div>
          <div>
            <h3>Login via site</h3>
        </div>
          <div>
            <form accept-charset="UTF-8" role="form">
                    <fieldset>
                <div>
                  <input placeholder="yourmail@example.com" name="email" type="text" id="email"  onBlur="checkAvailability()">
                  <span id="email-availability-status"></span>    
              </div>
              <div>
                <input placeholder="Password" name="password" type="password" value="">
              </div>
              <div>
                  <label>
                    <input name="remember" type="checkbox" value="Remember Me"> Remember Me
                  </label>
                </div>
              <input type="submit" value="Login">
            </fieldset>
              </form>
                      <hr/>
                    <center><h4>OR</h4></center>
                    <input type="submit" value="Login via facebook">
          </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Now we will call the JavaScript function which will trigger our ajax query. in ajax query we will call the check-availability page . in check-availability  page we will run our php script that will compare the email id from the database,
if the email is registered in database, a message will popup in red color and show the user that email is already registered, otherwise the popup is appear in green color and show the user that email id is available.

 <script>
          function checkAvailability() {
$("#loaderIcon").show();
jQuery.ajax({
url: "check_availability.php",
data:'email='+$("#email").val(),
type: "POST",
success:function(data){
$("#email-availability-status").html(data);
$("#loaderIcon").hide();
},
error:function (){}
});
}
        </script>

Put the Above  JavaScript in the head section of html code.

check-availability.php

<?php
$con= mysqli_connect("localhost","root","","dbname");
if(!empty($_POST["email"])) {
	$qry="SELECT email FROM user WHERE email='" . $_POST["email"] . "'";
$result = mysqli_query($con,$qry);
$row = mysqli_fetch_row($result);
	if($row>0)
{
echo "<span style='color:red'> Email already exists .</span>";
 echo "<script>$('#email-availability-status').prop('disabled',true);</script>";
} else{
	echo "<span style='color:green'> Email available for Registration .</span>";
 echo "<script>$('#email-availability-status').prop('disabled',false);</script>";
}
}
?>