Email live availability check using help of jquery and ajax in PHP.

POSTED

AUTHOR: VARUN SINGH

Email live check availability is the most important part on the web. Because every user has a unique email id. This is very important because different users should not registered with same email id or fake id. So that we can identify the users through their unique email id and stop the registration with duplicate email id that has already registered with other users. Here I am going to check the database field for already registered email and indicates the users to use other email id for registration. So here I am going to explain how to check email availability in database using php and ajax coding live without refreshing page.
Now i am going to display the output of this tutorials.

Email live check availability Page Output:

Here is the output of the Page. You can check your email is already registerd or not.

email live check availability
download live view


Implementation of code:


email.sql: Import this file in database to create users table in email database . Or you can create manually users table in email datebase. Here is the code of this file.

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

--
-- Database: `email`
--

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) NOT NULL,
  `email` varchar(30) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `username`, `email`) VALUES
(1, 'varun', 'varun@gmail.com'),
(2, 'anil', 'anil@gmail.com');


config.php: This file is used to create a connection to the database to access data from database.

<?php
$con=mysqli_connect("localhost","root","","email");
mysqli_set_charset($con,'utf8');
?>

index.php: This file is used to create user interface of the tutorials.

<html>
	
	<title>Email live availability check using php and ajax.</title>
	<head>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<meta name="Description" content="Email live availability check using php and ajax."/>
		
        <meta name="Keywords" content=" email, live , check, free, tutorial, on, Java programming, jsp, ejb, html, css, xml,
		java script, jquery, ajax, php, sql, mysql, database,
	    jdbc, odbc, spring, struts, hibernate, array, ANT, servlet, awt, code, programe, gmail, programming,
		Latest,facebook script, google script, 
	    twitter script,ecommerce,  Technologies, Free,  Tutorials, References, Examples,  coder glass, coderglas, coder"/>
		
        <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
		<script src="jquery.min.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
$(document).ready(function()
{
$("#email").change(function() 
{ 
var email = $("#email").val();
var msgbox = $("#status");

if(email.length > 4)
{
$("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');

$.ajax({  
    type: "POST",  
    url: "ajax.php",  
    data: "email="+ email,  
    success: function(msg){  
   $("#status").ajaxComplete(function(event, request){ 
	if(msg == 'OK')
	{ 
	
	    $("#email").removeClass("red");
	    $("#email").addClass("green");
        msgbox.html('<img src="available.png" align="absmiddle">');
	}  
	else  
	{  
	     $("#email").removeClass("green");
		 $("#email").addClass("red");
		msgbox.html(msg);
	}  
   
   });
   } 
   
  }); 

}
else
{
$("#email").addClass("red");
$("#status").html('<font color="#cc0000">Please enter atleast 5 letters</font>');
}
return false;
});

});
</SCRIPT>
		
		
	</head>
	<body>
	<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-73364464-1', 'auto');
  ga('send', 'pageview');

   </script>
		<center><div class="base">
			<div id="logo">
				<img src="logo.png" width="300" height="70" />
			</div>
			<div id="info1">
				Live Auto complete Search using PHP and JQuery<br>
				Designed by Varun Singh
			</div>
			
			<div class="base2">
			<?php include('../../../advertise/left-ads.php'); ?>
			<div id="form2" style="float:left">
				<div id="form-img">
				<img src="profile-img.png" width="80" height="80" />
			    </div>
				<div id="info4">
				  <b style="color:blue; font-weight:bold;">Already existing email:</b> &nbsp; (varun@gmail.com, anil@gmail.com)
			    </div>
				<div >
				<input  style="width:300px; font-size:14px; height:40px;padding:10px; border:solid 1px #000;
				border-radius:5px 5px 5px 5px;" type="text" name="email" id="email" placeholder="Search for Actors & Actress" />
				
                <span style="color:red;" id="status"></span>
				</div>
				<div>
				   <input type="submit" id="button2" value="Check" />
				</div>
                </div>
				
			</div>
			<?php include('../../../advertise/right-ads.php'); ?>
			</div>
			<div class="clear"></div>
			
		</div>
		</center>
	</body>
	
</html>


ajax.php: This file is used to check email in the database.

<?php

include("config.php");



if(isset($_POST['email']))
{
$email = $_POST['email'];
$sql = mysqli_query($con,"select * from users where email='$email'");
if(mysqli_num_rows($sql))
{
echo 'Email is already in use.';
}
else
{
echo 'OK';
}
}

?>


The End:

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Google + and Twitter. I need your support to continue.


Comments: