Username availability checking in database using php with jquery ajax method

Ariyal May 05, 2021
Username checker in jquery ajax
Jquery ajax database username checker 
Jquery ajax is the best way to check whether the username is available or not. Only using core ajax code is too long and difficult rather than ajax jquery. So use, jquery ajax method for ajax operation. Actually, ajax helps to get or retrieve and post the data from and into the database without reloading the pages.

Lets follow these core coding of jquery ajax which helps you to check the availability of username or any other data.

First of all you need different 3 codes:

  • Database table
  • Simple HTML Form with Jquery Ajax method
  • PHP coding "check_username.php"

Database Table

Create a table name users in database name test using like following codes:
CREATE TABLE users(
id int(11) not null auto_increment
username varchar(255) UNIQUE KEY,
password varchar(255),
PRIMARY KEY (id),
);

Simple HTML Form

<!doctype html>
<html>
<head>
<script src="<ADD JQUERY LIBRARY URL HERE>"></script>
ADD BELOW SCRIPT HERE OR ADD THE URL
</head>
<body>
<form method="post" name="form" action="check_username.php">
username<input type="text" name="username" id="username"/><br/>
<p id="res"></p>password<input type="password" name="password" id="password" />
<input type="submit" value="submit" name="submit" name="submit"/>
</form>
</body>
</html>


JQUERY AJAX SCRIPT

$(document).ready(function(){
      $('#username').keyup(function(){
          var uname = $(this).val();
         
        if(uname.length>5)
          {
              $(#res).html("Processing...");
               $.ajax({
                    type:'post',
                    url:"check_username.php",
                    dataType:'text' ,
                     data:{username:uname}, //key value pairing
                              success:function(value){
                                 $('#res').html(value);
                              }
                  });
           }
       
            else{
                  $('#res').html('<div style="color:red">Needs more than 5 characters</div>');
        }
     });
});

check_username.php PHP file

//create database connection first
$dbConn = new mysqli("localhost","root","password","test");
//check whether the connection is ready or not
if($dbConn->connect_error)
{
      die("Not connected with database, try again");
}
$username = $_POST['username'];
$sqlQuery = "SELECT USERNAME FROM users WHERE username = '$username' ";
$res = $dbConn->query($sqlQuery)
if($res->num_rows>0)
{
       echo "Username Already Taken";
}
else{
       echo "Username Available. Register Now";
}


I hope, the above code will help you to understand basic about .ajax() method of jquery. This is very much easy way to check username availability in database using jquery ajax method and php. 

If you have any difficulties to understand the above code, feel free to ask me. I will do my best to help you. Keep coding, Thank you.
Tags
Reactions

Post a Comment

1 Comments

Any comment will be appreciated, comment will be published according to our comment policy