How to Implement Check Username Availability Feature With AJAX & JQuery?

Checking username availability is one of the useful parts of registration system. It basically allow visitors to check the availability of their desired username. Now we know that most visitors today basically sign in using Facebook or Twitter or Gmail.

But there are still a few visitor who opt for manual registration process.

So for grabbing those visitors, it is important that you add this feature as well in your registration process.

In this PHP tutorial, we’ll learn how to create the script that checks the username availability  for registration.

Let’s Get Started

We’ll need following things to build this demo:

  • Language: PHP
  • Server: Xampp/Wamp
  • Database: MySql

Set Character-set For View

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Include JS Library for using od scripting command

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

Create HTML page to check username available or not

<h2>Check live email availability Demo</h2>
<div class="content">
<td>    Ex: <b><i>[email protected]</i></b><br /> <input type="text" placeholder="Username" name="username" id="username" /></td>
<td><div class="result" id="result"></div></td>

For validation of form and check available or taken

<script type="text/javascript">
// alert('sds');
var username = $(this).val(); // Get username textbox using $(this)

var Result = $('#result'); // Get ID of the result DIV where we display the results

if(username.length > 2) { // if greater than 2 (minimum 3)
Result.html('Loading...'); // you can use loading animation here
var dataPass = 'action=availability&username='+username;
$.ajax({ // Send the username val to available.php
type : 'POST',
data : dataPass,
url  : 'available.php',
success: function(responseText){ // Get the result
if(responseText == 0){
Result.html('<span class="success">Available</span>');
else if(responseText > 0){
Result.html('<span class="error">Taken</span>');
alert('Problem with sql query');
Result.html('Enter atleast 3 characters');
if(username.length == 0) {

Want to Create a Web Application?

Want to Create a Web Application?

In db.php file, we’ll check whether the connection is done or not.

define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'ur48x');
define('DB_DATABASE', 'demousers');
$connection = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
echo 'something is wrong please check carefully';


>>> when keyup that time call ajax function with jquery

>>> Here Used New File “available.php”
if(isset($_POST['action']) && $_POST['action'] == 'availability')
if ($connection->connect_error) {
die("Connection failed: " . $conn->connect_error);
$username       = mysqli_real_escape_string($connection,$_POST['username']); // Get the username values
//            echo $username;
//            echo "Connected successfully";
$query  = "select email from users3 where email='".$username."'";
$res    = mysqli_query($connection,$query);
$count  = mysqli_num_rows($res);
echo $count;



Once you run the demo, you can write a username in the textbox to check it’s availability. We’ve added few records in database table.

Here’s what will look when you enter already taken username.

Step 1

And if you add a username that’s new, it will look like below:

Step 2

And we are done! Simple and neat, right?

If you’re wondering why we decided to write for a small detailed topic, well the reason is because we believe that taking care of each and every small detail adds value to the website.

And in case you need any help implementing this feature in your website or looking to hire PHP developer, you can contact us for the same.

You can download a free copy of check username availability demo from Github.

Author Bio
Jigar Mistry
Jigar Mistry
Designation: Vice President (Technologies)

Jigar Mistry is Vice President (Technologies) at Space-O Technologies. He has 14+ years of experience in the web and mobile app development industry. He has expertise in different mobile app categories like health and fitness, eCommerce, and on-demand.