How to check Email and username availability live using jquery/ajax, PHP and PDO

In this tutorial, We will learn how to How to check Email and username availability live using jQuery/ajax and PHP-PDO.

File Structure for this tutorials

• index.php (Main File)
• config.php (Database Connection file)
• check_availability.php (Used to check the Email and User availability)

1. Create a database with name demos. In demos database, create a table with name email_availabilty
Sample structure of table email_availabilty

CREATE TABLE 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;

2. Create a database connection file

config.php

<?php
//DB Connection
define('DB_HOST','localhost');
define('DB_USER','root');
define('DB_PASS','');
define('DB_NAME','demos');
// Establish database connection.
try
{
$dbh = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME,DB_USER, DB_PASS,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
}
catch (PDOException $e)
{
exit("Error: " . $e->getMessage());
}

3. Now Create an HTML form
index.php

<?php
include_once("config.php");
?>
<table>
<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>

4. Jquery/ajax script where you pass variable to check_availability.php page. put this in index.php inside head.

<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>

5.check_availability.php page in this page you will check the availability of email or email.

<?php 
require_once("config.php");
//code check email
if(!empty($_POST["emailid"])) {
$uemail=$_POST["emailid"];
$sql ="SELECT email FROM email_availabilty WHERE email=:email";
$query= $dbh -> prepare($sql);
$query-> bindParam(':email', $uemail, PDO::PARAM_STR);
$query-> execute();
$results = $query -> fetchAll(PDO::FETCH_OBJ);

if($query -> rowCount() > 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"])) {
$username=$_POST["username"];
$sql ="SELECT username FROM email_availabilty WHERE username=:username";
$query= $dbh -> prepare($sql);
$query-> bindParam(':username', $username, PDO::PARAM_STR);
$query-> execute();
$results = $query -> fetchAll(PDO::FETCH_OBJ);

if($query -> rowCount() > 0)
 echo "<span style='color:red'> Username already exit .</span>";
	else 
echo "<span style='color:green'> Username Available.</span>";
}
// End code check username
?>

View Demo———————————–