Username availability checking using Ajax

Hi everybody, in my previous blog I show you how to create auto complete application in PHP using ajax and jQuery. Today I am talking about username availability checking and also email address availability checking using PHP, jQuery and Ajax. It is common application for every project. When a user want to register we have to check if username that the user is trying to use during registration process is already taken. Using Ajax, jQuery and PHP we can easily solve the problem. Lets start to build our application.





Step 1: Creating database table for username availability checking and insert some data
CREATE TABLE IF NOT EXISTS `user_information` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `email` (`email`)
)

INSERT INTO `user_information` (`id`, `username`, `email`, `password`) VALUES
(1, ‘admin’, ‘admin@admin.com’, ‘12345’),
(2, ‘admin123’, ‘admin123@admin.com’, ‘12345’),
(3, ‘abhijit’, ‘abhijit@abhijitpal.in’, ‘12345’),
(4, ‘technokrats’, ‘info@technokrats.in’, ‘12345’),
(5, ‘seacom’, ‘seacom@gmail.com’, ‘12345’),
(6, ‘pratyush’, ‘pratyush@gmail.com’, ‘12345’);

Step2: Now we Creating our view file index.php. This file will show a html form.




	
	Username availability check using php and Ajax 
	
	
	


	


Step 3: Create style.css for styling our view file

* {
    margin: 0;
    padding: 0;
}
body, .login-submit, .login-submit:before, .login-submit:after {
  background: #373737 url("../img/bg.png") 0 0 repeat;
}

body {
  font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #404040;
}

p{margin-bottom:10px;}

.login {
  position: relative;
  margin: 80px auto;
  width: 700px;
  padding-right: 32px;
  font-weight: 300;
  color: #a8a7a8;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}
.login p {
  margin: 0 0 10px;
}

input, button, label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input[type=text], input[type=email], input[type=password] {
  padding: 0 10px;
  width: 300px;
  height: 40px;
  color: #bbb;
  text-shadow: 1px 1px 1px black;
  background: rgba(0, 0, 0, 0.16);
  border: 0;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
}
input[type=text]:focus, input[type=password]:focus {
  color: white;
  background: rgba(0, 0, 0, 0.1);
  outline: 0;
}

label {
  float: left;
  width: 100px;
  line-height: 40px;
  padding-right: 10px;
  font-weight: 100;
  text-align: right;
  letter-spacing: 1px;
  color:#BDBDBD;
}

.login-submit {
    background: none repeat scroll 0 0 #4aaaa5;
    border: 0 solid #e3edf4;
    border-radius: 2px;
    color: #f4f4f4;
    float: left;
    font-family: Arial,sans-serif;
    font-weight: bold;
    margin-left: 5px;
    margin-top: 26px;
    padding: 8px 18px;
    text-decoration: none;
}

Step 4: Now create usernamevalid.js file. This file will take value from the form and using ajax we show the availability message to the user.

$(document).ready(function(){
	$('#user_check').blur(function(){
		var query_string = $(this).val();
		$.ajax({
			type: "POST",
			url: "user_valid.php",
			data: { name:query_string },
			success: function(data)
			{
				if(data=='exist')
				{
					$('#result_user').html('Username already exist');
					$('.login-submit').attr('disabled', 'disabled');
				}
				else
				{
					$('#result_user').html(query_string+' is valid username');
				}				
			}
		});
	});
	
	$('#email_check').blur(function(){
		var query_string = $(this).val();
		if(query_string.length>3)
		{
			$.ajax({
				type: "POST",
				url: "email_valid.php",
				data: { name:query_string },
				success: function(data)
				{
					if(data=='exist')
					{
						$('#result_email').html('Email already exist');
						$('.login-submit').attr('disabled', 'disabled');
					}
					else
					{
						$('#result_email').html(query_string+' is valid email');
						$('.login-submit').removeAttr('disabled');
					}				
				}
			});
		}
	});
});

Step 5: Create the connection file conn.php to create php with mysql

<?php
mysql_connect('localhost','root','');
mysql_select_db('test');
?>

Step 6: Create user_valid.php for username availability checking. This file receive the ajax post request for username and check if the username already exist or not

<?php
include('conn.php');
if(isset($_POST['name']))
{
	$username = mysql_real_escape_string(trim($_POST['name']));
	$sql = "SELECT `username` FROM `user_information` WHERE `username` = '$username'";
	$myquery = mysql_query($sql) or die(mysql_error());
	if(mysql_num_rows($myquery) !=0)
	{
		echo 'exist';
	}
	else
	{
		echo 'not exist';
	}
}
?>

Demo
Download

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •