Welcome to TechYari!

Tutorials on webdesign, web development and more...

Live username availability check in PHP with jQuery and Ajax

By  TechYari     10/30/2014    Labels:,,,, 
Today I am going to discuss live username availability check in php with ajax, an approach used by many websites on there registration form. This code is an example of how you can check availability of a username while user type in the forms input field. In order to keep it simple I have left the registration part.

I am using PHP with jQuery and Ajax but same can be achieved in any programming language with the ajax call provided in the tutorial.


Download Source Live Demo

Database table setup

First we will create a table to store our users. You can use you own database/table and change the configuration and query in next step to point to that instead of creating this dummy db table.

CREATE TABLE demo_users(
   username VARCHAR(100) NOT NULL,

Configure PHP to connect to database(database-config.php)

Here we configure database related details. Change the variable values according to your environment

   // define database related variables
   $database = 'techyari_demos';
   $host = 'localhost';
   $user = 'root';
   $pass = '';

   // try to conncet to database
   $dbh = new PDO("mysql:dbname={$database};host={$host};port={3306}", $user, $pass);


      echo "unable to connect to database";

Registration Page (index.php)

Here we use oninput event on username input field to trigger our javascript function which will get username and pass it to check.php file via ajax using jquery. I am leaving out other parts of code which are not related to the tutorial, be sure to include jQuery and main.js file in index.php. You can download souce code if you have any doubts.

<h4>Choose a username</h4><br/>
                                  <input type="text" name="username" class="col-md-8 " id="username" placeholder="Type here" required autofocus oninput="checkname()">
                                  <span class="col-md-4" id="checking"></span>

Checking the username availability in database with PHP (check.php)

This script fires a query to database with the name entered by user and returns appropriate message to the ajax function. See next step for ajax call.

 require 'database-config.php';

 $username = "";
  $username = $_GET['username'];
 $q = 'SELECT * FROM demo_users WHERE username LIKE :username';

 $query = $dbh->prepare($q);

 $query->execute(array(':username' => $username));

 if($query->rowCount() == 0){
  echo "Available";
  echo "Username not available";


Making request to check username via Ajax with jQuery (main.js)

We will call check.php via ajax and display the appropriate results to the user.

var username = "";
var checkname = function(){
     var username = $("#username").val();
       url: "check.php",
       type: 'GET',
       data: {username : username},
       success: function(data) {  
    $('#checking').html('<p class="bg-success">Available</p>');
    $('#checking').html('<p class="bg-danger">Not available</p>');
      error: function(e) {
     $('#checking').html('<p class="bg-danger">There was an error</p>');


That's all we have created a simple mechanism to check username availability with ajax. Feel free to post your suggestions and queries.

About TechYari

A web developer, blogger, amateur designer and an open source enthusiast.

No comments:

Post a comment

Contact form


Email *

Message *


Follow TechYari on


About TechYari

Tech Yari is a Technical Blog featuring articles on Web Development, Web Design, Search Engine Optimization, Social Media Marketting and Programming.