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
|
1 2 3 4 5 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?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———————————–
Download Full Source Code (How to check Email and username availability live using jQuery/ajax, PHP and PDO)
Size: 30 KB
Version: V 1.0
