A programming & designing blog!

Monday, September 2, 2013

Live jQuery Ajax Username Availability Check

In this post I will describe how to check user name availability asynchronously before sing up with jQuery Ajax. This technique is mostly used by web developers. Because it save users time to sign up an account and it can also help to prevent duplicate accounts.

Live Demo Download Source
Database Design
First we need create a table called users that contains users information, like userid, username, password and whatever you want
CREATE TABLE `users` (
  `username` varchar(16) NOT NULL UNIQUE,
  `password` varchar(16) NOT NULL ,

Database Configaration
To connecting and working with db, we needs do some configuration
 * DB Configuration
define('DB_HOST', 'localhost');
define('DB_NAME', 'dbname');
define('DB_USER', 'root');
define('DB_PASS', 'root');
 * Connect and select MySQL DB
$link = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die('Could not connect to MySQL server! ') . mysql_error();
$db = mysql_select_db(DB_NAME) or die('Fail to select MySQL DB ') . mysql_error();

HTML Markup
Take a look at the html markup, we take a html form with a input filed named username, where users will enter there username. We also need to add a empty div with id named usernameCheck. This div is the place where will show notification.
<!doctype html>
<html lang="en">
  <title>Live jQuery Ajax Username Availability Check</title>
<form action="" method="post">
  <div id="usernameCheck"></div><!--show notification -->
      <input type="text" maxlenght="16" id="username" name="username">

CSS Styling
We need to do little bit styling to show alerts
  display: block;
  width: 24px;
  height: 24px;
  padding: 0px;
  background-repeat: no-repeat;
  background-position: center center;
  float: right;
  margin: 5px;
  background: url(gif.gif)
  background: url(no.png)
  background: url(ok.png)

jQuery and JavaScript Part
In this JavaScript code we first needs to include jQuery library. I add a event named keyup. This event executes when users write on the input field. When user writes more than 3 character length this script will send a asynchronous request using jQuery.ajax method.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  var usernameCheck = $('#usernameCheck');
  $('#username').on('keyup', function(){
    var username = $('#username').val();
    if (username.length >= 3) {
        type: 'POST',
        cache: 'false',
        data: {username: username}, // form data
        beforeSend: function() {
          // show loading image
          usernameCheck.attr('class', 'usernameLoading');
        success: function(d) {
          if (d == 200) {
            // show ok image
            usernameCheck.attr('class', 'usernamePassed');
          else if (d == 201) {
            // show fail image
            usernameCheck.attr('class', 'usernameFail');

PHP Part
This PHP script will receive asynchronous request that sent by jQuery.ajax and it will query into database table. If it will find no error it will echo out 200 or if it will find any error it will echo out 201.

  if (!empty($_POST['username'])) {
    # prevent sql injection
    $username = mysql_real_escape_string($_POST['username']);
    # username between 3-16
    if (strlen($username) >= 3) {
      # query users table
      $query = mysql_query("SELECT id FROM users WHERE username = '{$username}'");
      if (mysql_num_rows($query) < 1) {
        echo 200; # username not exist in db
      } else {
        echo 201; # username already exist
    } else {
      echo 201;
  return; # stop execution


  1. Great Post, Actually PHP is a beautiful source for developing a database driven web application, I love this post, thanks for spending your time for discussing about this topic.
    PHP Training in Chennai


  2. This technical post helps me to improve my skills set, thanks for this wonder article I expect your upcoming blog, so keep sharing..
    Web design training institute in Chennai

  3. The share your really gives us excitement. Thanks for your sharing. If you feel tired at work or study try to participate in our games to bring the most exciting feeling. Thank you!
    hotmail sign in | red ball 1 |

  4. The blog or and best that is extremely useful to keep I can share the ideas of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
    animal jam | five nights at freddy's | hotmail login

  5. I regularly visit your site and find a lot of interesting information.
    Not only good posts but also great comments.
    Thank you and look forward to your page growing stronger.
    color switch

  6. It is important to reach more recipients. Natalie