Skip to main content

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=""></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


Post a Comment

Popular posts from this blog

Multiple File Upload with PHP

Sometimes we need to allow our users to upload multiple file upload. On my previous post I was shown the basic of simple file upload with PHP. Today I am going to show you how to allow users to upload multiple files. It is almost similar like simple file upload but we need to do some modification with html markup and php code. multiple attribute is needed to add on the html markup. Major web browsers like Firefox, Chrome, Safari and IE 9+ support this attribute. Now I am going to show you how to upload multiple file with PHP and basic HTML form.

Live Comment System with jQuery Ajax PHP and MySQL

Recently I have been made a post that focused on how to submit form without page refreshing. That post shows the basic functionality of using jQuery Ajax. On the same follow this post will describe how we can create a comment system to post an instant comment without page refreshing. Let's start...

Resize Image While Uploading with PHP

On my previous post I was shown an example how to upload file with php and html. It was based on php simple image upload functionality. Today I am going to show you little bit advance of image uploading. Suppose if you run a website and want to allow users to upload image files than you need to think little bit about server's space and bandwidth. For this purpose you need to do some optimization with image files. Image resize while uploading is one of them. All major website do it in the same way. If a user uploads a 5mb image file they resize it in different sizes and store on there server. It helps them to seed up there website and reduce there budget. Now take a look, how we can do it ourself.