Check Email Availability using Ajax php

Hi friends, in this post we will discuss how to Check Email Availability using Ajax php. It is something like, user earlier registered with us or a new user. It will provide you information live and user don’t want to reload the entire form in case of email registered earlier.

In earlier post we had discussed about #1045 – Access denied for user ‘root’@’localhost’ (using password: NO), Foreign key in phpmyadmin, Excerpts in Twenty Twelve Theme and Editor Feature is not Showing in WordPress.

Then design the page, i am just taking one textbox for email id, you can take as many controls as you want. In this on key release by user code made ajax call, we will be using jQuery $.post method, it is the easiest way to load data from the server using a HTTP POST request. On check with server it will display availability of username.

First we have to create users table, then insert some dummy data into that:

Database table Creation Script with Dummy data:

1--Create table users--
2CREATE TABLE IF NOT EXISTS `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(60) NOT NULL, PRIMARY KEY (`id`) )
3 
4--Insert Dummy data into Table--
5INSERT INTO `hightechnology`.`users` (`id`, `username`) VALUES (NULL, 'info@hightechnology.in'), (NULL, 'Test@hightechnology.in');

Check Email Availability using Ajax php Design:

01<!DOCTYPE html>
02<html>
03<head>
04<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05<title>Check Email Availability using Ajax php</title>
06<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
07<script type="text/javascript">
08        $(document).ready(function() {
09            $("#username").keyup(function (e) {
10 
11                //removes spaces from username
12                $(this).val($(this).val().replace(/\s/g, ''));
13 
14                var username = $(this).val();
15                if(username.length < 4){$("#user-result").html('');return;}
16 
17                if(username.length >= 4){
18                    $("#user-result").html('<img src="img/ajax-loader.gif" />');
19                    $.post('check_email.php', {'username':username}, function(data) {
20                        $("#user-result").html(data);
21                    });
22                }
23            });
24        });
25</script>
26<style type="text/css">
27body
28{
29margin:0px auto;
30width:1020px;
31padding-top:50px;
32font-family:Calibri;
33}
34h1
35{
36text-align:center;
37}
38#registration-form
39{
40background: #FDFDFD;
41width: 350px;
42padding: 20px;
43margin-right: auto;
44margin-left: auto;
45border: 1px solid #E9E9E9;
46border-radius: 10px;
47}
48</style>
49</head>
50<body>
51 
52<h1>Check Email Availability using Ajax php</h1>
53<div id="registration-form">
54<label for="username">Enter Username :
55<input name="username" type="text" id="username">
56<span id="user-result"></span>
57</label>
58</div>
59<br /><br /><br /><br />
60All rights reserved by <a href="http://www.hightechnology.in">www.Hightechnology.in</a>| Back to article:
61<a href="http://hightechnology.in/change-gridview-row-color-based-on-value-of-row">
62Change GridView Row Color Based on Value of Row</a> | Hosting partner 
63<a href="http://www.grootstech.com" target="_blank">Grootstech</a> 
64 
65</body>
66</html>

Check Email Availability using Ajax php Code:

01<?php
02###### db ##########
03$db_username = 'root';
04$db_password = '';
05$db_name = 'hightechnology';
06$db_host = 'localhost';
07################
08 
09 
10 
11if(isset($_POST["username"]))
12{
13    //check if its ajax request, exit script if its not
14    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
15        die();
16    }
17 
18    //try connect to db
19    $connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');
20 
21    //trim and lowercase username
22    $username =  strtolower(trim($_POST["username"]));
23 
24    $username = filter_var($username, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW|FILTER_FLAG_STRIP_HIGH);
25     
26    $results = mysqli_query($connecDB,"SELECT id FROM users WHERE username='$username'");
27 
28    //return total count
29    $username_exist = mysqli_num_rows($results); //total records
30 
31    //if value is more than 0, username is not available
32    if($username_exist) {
33        die('<img src="img/not-available.png" />');
34    }else{
35        die('<img src="img/available.png" />');
36    }
37 
38    //close db connection
39    mysqli_close($connecDB);
40}
41?>