Check Username Availability with AJAX PHP and PDO

On the website, there must be a unique identifier for each user. It can be the username, email-id or any string using which user can log in to the website and access it.

Before adding the user using the registration form it must be check if the username is available or not.

This can either done after submitting the form or using jQuery AJAX to display availability status before submitting the form.

In this tutorial, I show how you can check username already exists or not in the MySQL database table using jQuery AJAX PHP and PDO.

---

Contents

1. Table structure
2. Configuration
3. HTML
4. AJAX
5. jQuery
6. Demo
7. Conclusion

---

1. Table structure

I am using users table in the example –

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(80) NOT NULL,
  `fullname` varchar(80) NOT NULL,
  `password` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

---

2. Configuration

Create a config.php for a database connection.

Completed Code

<?php
$server = "localhost";
$username = "root";
$password = "";
$dbname = "tutorial";

// Create connection
try{
   $conn = new PDO("mysql:host=$server;dbname=$dbname","$username","$password");
   $conn->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
}catch(PDOException $e){
   die('Unable to connect with the database');
}

---

3. HTML

Create a <input type='text' id='txt_username'> for username input and create a <div id='uname_response' > to display a message on whether a username exists or not using jQuery.

Completed Code

<div>
   <input type="text" class="textbox" id="txt_username" name="txt_username" placeholder="Enter Username" />
   <!-- Response -->
   <div id="uname_response" ></div>
</div>

---

4. AJAX

Create ajaxfile.php file.

Check if 'username' is POST or not.

If POST then check $_POST['username'] is exists or not in the 'users' table or not.

If exists then return "Not Available" otherwise "Available" message.

Completed Code

<?php

include 'config.php';

if(isset($_POST['username'])){
   $username = $_POST['username'];

   // Check username
   $stmt = $conn->prepare("SELECT count(*) as cntUser FROM users WHERE username=:username");
   $stmt->bindValue(':username', $username, PDO::PARAM_STR);
   $stmt->execute(); 
   $count = $stmt->fetchColumn();

   $response = "<span style='color: green;'>Available.</span>";
   if($count > 0){
      $response = "<span style='color: red;'>Not Available.</span>";
   }

   echo $response;
   exit;
}

---

5. jQuery

Define keyup event on #txt_username selector.

Read the value and check if it is empty or not.

If empty then empty the #uname_response selector otherwise send AJAX POST request to 'ajaxfile.php' file where pass username as data.

On successful callback write a response in #uname_response.

Completed Code

$(document).ready(function(){

   $("#txt_username").keyup(function(){

     var username = $(this).val().trim();

     if(username != ''){

        $.ajax({
           url: 'ajaxfile.php',
           type: 'post',
           data: {username:username},
           success: function(response){

              // Show response
              $("#uname_response").html(response);

           }
        });
     }else{
        $("#uname_response").html("");
     }

  });

});

---

6. Demo

View Demo

---

7. Conclusion

I used keyup event to display username status while typing but you can also use other events like onblur on the textbox or click on the button.

If you found this tutorial helpful then don't forget to share.