I have pepared another tutorial similar  to this https://cloudrebue.co.ke/how-to-live-chec…-jquery-and-ajax/ but using MYSQLI. If you don’t know how to use PDO this will help you.

1. Create a database with the name email_availability. In email_availability database, create a table with the name email_availabilty.

Simply paste this code in SQL field in your database to import demo data

CREATE TABLE IF NOT EXISTS IF NOT EXISTS `email_availabilty` (
`id` int(11) NOT NULL,
  `email` varchar(255) NOT NULL,
  `username` varchar(255) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

INSERT INTO `email_availabilty` (`id`, `email`, `username`) VALUES
(2, 'demo@gmail.com', 'demo'),
(3, 'anuj@gmail.com', 'anuj'),
(4, 'john@gmail.com', 'john');
ALTER TABLE `email_availabilty`
 ADD PRIMARY KEY (`id`);

2. Create database connection file Config.php and replace the database values with yours.

<?php
$con = mysqli_connect("localhost","root","","email_availability");

// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
  
?>

3. Now Create a HTML form index.php

<?php
include_once("config.php");


 ?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>CLOUD REBUE | DEMO</title>
    <meta name="generator" content="Bootply" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="css/styles.css" rel="stylesheet">
   </head>
  <body>

 <!--/left-->
  
  <!--center-->
  
  <div class="col-sm-7">
    <div class="row">
<div class="col-xs-6 col-md-6"></div>
  <div class="col-xs-6 col-md-6">
      
        <h3>Email and Username Availability  With AJAX(JQuery) and PHP </h3>
    <hr >
    <form name="insert" action="" method="post">
     <table width="100%"  border="0">
  <tr>
    <th width="24%"  height="46" scope="row">Email Id :</th>
    <td width="71%" ><input type="email" name="email" id="emailid" onBlur="checkemailAvailability()" value="" class="form-control" required /></td>
</tr>
<tr>
  <th width="24%"  scope="row"></th>
<td >   <span id="email-availability-status"></span> </td>
  </tr>
  <tr>
    <th height="42" scope="row">User Name</th>
    <td><input type="text" name="username" id="username" value="" onBlur="checkusernameAvailability()" class="form-control" required /></td>

  </tr>
  <tr>
  <th width="24%"  scope="row"></th>
<td >   <span id="username-availability-status"></span> </td>
  </tr>
</table>



     </form>
 
      </div>
     <hr>
    </div>
  <div class="col-md-3"></div>
    
        
   </div><!--middle-->
   
  
  </div><!--/center-->
 
  


    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

4. Write the Jquery/Ajax script where you pass variable to check_availability.php file. paste this in index.php inside head tags.

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

Here is the complete index.php Code

<?php
include_once("config.php");


 ?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>CLOUD REBUE | DEMO</title>
    <meta name="generator" content="Bootply" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="css/styles.css" rel="stylesheet">
    <script>
function checkemailAvailability() {
$("#loaderIcon").show();
jQuery.ajax({
url: "check_availability.php",
data:'emailid='+$("#emailid").val(),
type: "POST",
success:function(data){
$("#email-availability-status").html(data);
$("#loaderIcon").hide();
},
error:function (){}
});
}

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

 <!--/left-->
  
  <!--center-->
  
  <div class="col-sm-7">
    <div class="row">
<div class="col-xs-6 col-md-6"></div>
  <div class="col-xs-6 col-md-6">
      
        <h3>Email and Username Availability  With AJAX(JQuery) and PHP </h3>
    <hr >
    <form name="insert" action="" method="post">
     <table width="100%"  border="0">
  <tr>
    <th width="24%"  height="46" scope="row">Email Id :</th>
    <td width="71%" ><input type="email" name="email" id="emailid" onBlur="checkemailAvailability()" value="" class="form-control" required /></td>
</tr>
<tr>
  <th width="24%"  scope="row"></th>
<td >   <span id="email-availability-status"></span> </td>
  </tr>
  <tr>
    <th height="42" scope="row">User Name</th>
    <td><input type="text" name="username" id="username" value="" onBlur="checkusernameAvailability()" class="form-control" required /></td>

  </tr>
  <tr>
  <th width="24%"  scope="row"></th>
<td >   <span id="username-availability-status"></span> </td>
  </tr>
</table>



     </form>
 
      </div>
     <hr>
    </div>
  <div class="col-md-3"></div>
    
        
   </div><!--middle-->
   
  
  </div><!--/center-->
 
  


    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

5. Create check_availability.php file, in this file you will check the availablity of email or username

<?php
require_once("config.php");
//code check email
if(!empty($_POST["emailid"])) {
$result = mysqli_query($con,"SELECT count(*) FROM email_availabilty WHERE email='" . $_POST["emailid"] . "'");
$row = mysqli_fetch_row($result);
$email_count = $row[0];
if($email_count>0) echo "<span style='color:red'> Email Already Exit .</span>";
else echo "<span style='color:green'> Email Available.</span>";
}
// End code check email
//Code check user name
if(!empty($_POST["username"])) {
  $result1 = mysqli_query($con,"SELECT count(*) FROM email_availabilty WHERE username='" . $_POST["username"] . "'");
  $row1 = mysqli_fetch_row($result1);
  $user_count = $row1[0];
  if($user_count>0) echo "<span style='color:red'> Username already exit .</span>";
  else echo "<span style='color:green'> Username Available.</span>";
}
// End code check username
?>

 

 

You may also like: How to live check username and email already exists in the database using PHP JQUERY and AJAX (PDO)

Post Views: 8,428