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:
--Create table users-- CREATE TABLE IF NOT EXISTS `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(60) NOT NULL, PRIMARY KEY (`id`) ) --Insert Dummy data into Table-- INSERT INTO `hightechnology`.`users` (`id`, `username`) VALUES (NULL, 'info@hightechnology.in'), (NULL, 'Test@hightechnology.in');
Check Email Availability using Ajax php Design:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Check Email Availability using Ajax php</title> <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#username").keyup(function (e) { //removes spaces from username $(this).val($(this).val().replace(/\s/g, '')); var username = $(this).val(); if(username.length < 4){$("#user-result").html('');return;} if(username.length >= 4){ $("#user-result").html('<img src="img/ajax-loader.gif" />'); $.post('check_email.php', {'username':username}, function(data) { $("#user-result").html(data); }); } }); }); </script> <style type="text/css"> body { margin:0px auto; width:1020px; padding-top:50px; font-family:Calibri; } h1 { text-align:center; } #registration-form { background: #FDFDFD; width: 350px; padding: 20px; margin-right: auto; margin-left: auto; border: 1px solid #E9E9E9; border-radius: 10px; } </style> </head> <body> <h1>Check Email Availability using Ajax php</h1> <div id="registration-form"> <label for="username">Enter Username : <input name="username" type="text" id="username"> <span id="user-result"></span> </label> </div> <br /><br /><br /><br /> All rights reserved by <a href="http://www.hightechnology.in">www.Hightechnology.in</a>| Back to article: <a href="http://hightechnology.in/change-gridview-row-color-based-on-value-of-row"> Change GridView Row Color Based on Value of Row</a> | Hosting partner <a href="http://www.grootstech.com" target="_blank">Grootstech</a> </body> </html>
Check Email Availability using Ajax php Code:
<?php ###### db ########## $db_username = 'root'; $db_password = ''; $db_name = 'hightechnology'; $db_host = 'localhost'; ################ if(isset($_POST["username"])) { //check if its ajax request, exit script if its not if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') { die(); } //try connect to db $connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database'); //trim and lowercase username $username = strtolower(trim($_POST["username"])); $username = filter_var($username, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW|FILTER_FLAG_STRIP_HIGH); $results = mysqli_query($connecDB,"SELECT id FROM users WHERE username='$username'"); //return total count $username_exist = mysqli_num_rows($results); //total records //if value is more than 0, username is not available if($username_exist) { die('<img src="img/not-available.png" />'); }else{ die('<img src="img/available.png" />'); } //close db connection mysqli_close($connecDB); } ?>