jQuery – Ajax Tutorials PHP

How to check Email and username availabilty live using jquery/ajax

In this I will explain about how to check email and username availabilty using AJAX(jquery)

View Demo

1. Create database with name demos. In demos data base 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 database connection file
Config.php

<?php
$con = mysqli_connect("localhost","root","","demos");
// 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");
?>
<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 yhe availablity of email or email

<?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
?>
View Demo  
Download Source Code(Email and username availabilty live using jquery/ajax)
Size: 28 KB
Version: V 2.0

About the author

Anuj kumar

I'm Anuj kumar a web developer with 4+ year experience .I write blogs in my free time. I love to learn new technologies and share with others. I founded PHPGurukul in September 2015. The main aim of this website to is provide php , jquery , mysql , phpoops and other web development tutorials. I am trying best effort to make PHPGurukul useful for every single moment spend on this website. If you think this website is useful to visit please share with your friend and buddies.

Leave a Comment