Check username is available or not using AJAX

You have already seen in many websites while Registration they allow the user to enter its username. While entering username they instantly show that username is available or not.

When is it require?

Instead of showing the message to the user that this username is already taken by someone after form gets submits. By this way, the user needs to again fill the form and press Register button.

Why not show it before, it save users time and reduce the frustration of filling the form again and again.

When you instantly show the status without pressing the button then it looks more user-friendly.

What are we creating?

In the demonstration, I am creating a Registration form and using AJAX to check username is already taken by someone or not, if its taken then showing the message to the user.

Check username is available or not using AJAX

In this example, I am using MySQL , and the name of the database is tutorial and table name is users.

 


The Data Source

Here, is our available users in “users” table.

id Username Name
1 yssyogesh Yogesh singh
2 sona Sonarika Bhadoria
3 vishal Vishal Sahu
4 sunil Sunil singh
5 vijay Vijay mourya
6 anil Anil singh
7 jiten jitendra singh

Contents

  1. HTML
  2. PHP
  3. jQuery
  4. CSS

1. HTML

Creating a <div id=’div_reg’> which containing Registration form fields.

With username input field also created a <div id=’uname_response’ class=’response’> for showing message on screen.

Completed Code

<div class="container">

    <div id="div_reg">
        <h1>Registration</h1>

        <div>
            <input type="text" class="textbox" id="txt_name" name="txt_name" placeholder="Name"/>
        </div>

        <!-- Username -->
        <div>
            <input type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username"  />
            <div id="uname_response" class="response"></div>
        </div>

        <div>
            <input type="password" class="textbox" id="txt_pwd" name="txt_pwd" placeholder="Password"/>
        </div>

        <div>
            <input type="password" class="textbox" id="txt_repwd" name="txt_repwd" placeholder="Re-type Password"/>
        </div>

        <div>
            <input type="submit" value="Submit" name="but_submit" id="but_submit" />
        </div>

    </div>

</div>

2. PHP

Create a new uname_check.php file from here, checking $_POST[‘uname’] value in user table and returning number of rows.

Completed Code

<?php

$host = "localhost";
$user = "root";
$password = "";
$dbname = "tutorial";

/* Connection */
$con = mysql_connect($host,$user,$password) or die('connection not found');

$db = mysql_select_db($dbname,$con);

/* Getting username */
$uname = $_POST['uname'];

/* Query */
$query = "select count(*) as cntUser from user where username='".$uname."'";

$result = mysql_query($query);

$row = mysql_fetch_array($result);

$count = $row['cntUser'];

echo $count;

?>

3. jQuery

Sending AJAX request on username field change event and passing its values as data.

On success  check the response value is greater than 0 or not. If it’s greater than 0 then showing Username already in use message in <div id=’uname_response’>

 

Completed Code

<script>
    $(document).ready(function(){

        $("#txt_uname").change(function(){

            var uname = $("#txt_uname").val().trim();

            if(uname != ''){

                $("#uname_response").show();

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

                        if(response > 0){
                            $("#uname_response").html("<span class='not-exists'>* Username Already in use.</span>");

                        }else{
                            $("#uname_response").html("<span class='exists'>Available.</span>");

                        }

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

        });

    });
</script>

 


4. CSS

Completed Code

/* Container */
.container{
    margin: 0 auto;
    width: 70%;
}

/* Registration */
#div_reg{
    border: 1px solid gray;
    border-radius: 3px;
    width: 470px;
    height: 370px;
    box-shadow: 0px 2px 2px 0px  gray;
    margin: 0 auto;
}

#div_reg h1{
    margin-top:0px;
    font-weight: normal;
    padding:10px;
    background-color:cornflowerblue;
    color:white;
    font-family:sans-serif;
}

#div_reg div{
    clear: both;
    margin-top: 10px;
    padding: 5px;
}

#div_reg .textbox{
    width: 96%;
    padding: 7px;
}

#div_reg input[type=submit]{
    padding: 7px;
    width: 100px;
    background-color: lightseagreen;
    border: 0px;
    color: white;
}

/* Response */
.response{
    padding: 6px;
    display: none;
}

.not-exists{
    color: green;
}

.exists{
    color: red;
}
Spread the love

Related Post

Be First to Comment

Leave a Reply

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