December 21, 2014 9:26 am

How to check live username availability with jQuery & PHP

I have received requests from my user to write tutorial on live username availability using PHP and jQuery so this tutorial show you that how you can implement live username availability checker in your website signup forms or anywhere you need. This tutorial is very simple and easy to integrate and a live demo is available to test it before downloading the script.

How to check live username availability with jQuery & PHP

[wpdm_file id=119]DEMO

Read Also: How to Integrate live search in PHP and MySQL with jQuery

Database design and table:
database name => phpgang
table name => users
column names => id, username, email

db.sql

Database file run in your mysql to create database and add data in table.

CREATE TABLE `users` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO  `users` (  `id` ,  `username` ,  `email` ) 
VALUES (NULL ,  'phpgang',  'PHPGang'), 
(NULL ,  'huzoorbux',  'Huzoor Bux');

db.php

Database configuration file edit database name, user, password and dbname as per your configuration.

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'phpgang');
define('DB_PASSWORD', '*******');
define('DB_DATABASE', 'phpgang');
$connection = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

available.php

File contains code to check that your typed user name exists in database or not and send validated or invalid to your jQuery code.

<?php
    include_once('db.php');
    if(isset($_POST['action']) && $_POST['action'] == 'availability')
    {
        $username       = mysqli_real_escape_string($connection,$_POST['username']); // Get the username values
            $query  = "select username from user3 where username='".$username."'";
            $res    = mysqli_query($connection,$query);
            $count  = mysqli_num_rows($res);
            echo $count;
    }
?>

 index.html

This file contains HTML, CSS and jQuery to validate username.

<!DOCTYPE html>
<html>
<head>
    <title>How to check live username availability with jQuery & PHP | PGPGang.com</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#username').keyup(function(){
        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>');
                }
                else{
                    alert('Problem with sql query');
                }
            }
            });
        }else{
            Result.html('Enter atleast 3 characters');
        }
        if(username.length == 0) {
            Result.html('');
        }
    });
});
</script>
    <style type="text/css">
        .success
        {
            color: green;
        }
        .error
        {
            color: red;
        }
        .content
        {
            width:900px;
            margin:0 auto;
        }
        #username
        {
            width:500px;
            border:solid 1px #000;
            padding:10px;
            font-size:14px;
        }
    </style>

</head>
<body>
    <h2>How to check live username availability with jQuery & PHP example.&nbsp;&nbsp;&nbsp;=> <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>  
    <br>
    <div class="content">
    <table>
        <tr>
            <td>&nbsp; &nbsp; Ex: <b><i>huzoorbux, phpgang or ravi</i></b><br /> <input type="text" placeholder="Username" name="username" id="username" /></td>
            <td><div class="result" id="result"></div></td>
        </tr>
    </table>
</div>
</body>
</html>

That’s all for this article we will share more articles and please share this tutorial with your friends and write your problems in comments.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

12 responses to “How to check live username availability with jQuery & PHP”

  1. Vaibhav says:

    Awesome tutorial… but i face one problem in this, when we write “huzoorbux” it’s working fine but when we copy “huzoorbux” and paste into the input field then it’s not working.

  2. Manisankar says:

    Where did you write jquery function call?

  3. satish says:

    not getting where the jquery function call ?
    please let me know on which page it it?

  4. satish says:

    thank you

  5. thaw says:

    Although i subscribe your link . command to me to subscribe again. and then i can’t download anything.

  6. Jagdish says:

    Dear Sir, am getting problem of developing comment systeme like facebook, please can you share me.

  7. ankit says:

    thanks for the tutorial https://www.twekr.com

  8. Razor Mureithi says:

    Thax

Leave a Reply

Your email address will not be published. Required fields are marked *