jQuery Username Availability Live Check with PHP and Ajax | Coding Cage

jQuery Username Availability Live Check with PHP and Ajax

By
In this tutorial you will learn How to create a Username Availability Live check Script using jQuery Ajax and PHP, it's easy to create, i have used here $.ajax() you can also use $.post() method to create same script, flow is simple as user types preferred username in the input box then "$.ajax()" function calls an HTTP POST request dynamically and fetch the username from the MySQL Database Table through the PHP Script and shows that the username available or not all the functionality will done by "$.ajax()" keyup() event, have a look.
jQuery Username Availability Live Check with PHP and Ajax

This is Simple Tutorial contains two PHP files one is main "index.php" file contains jQuery/javascript Code and simple HTML Form, and second is "username-check.php" file which is called dynamically via $.ajax() POST request and displays username is available or not.

copy paste following sql code in your phpMyAdmin to create database and table.

CREATE TABLE `users` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`user_name` VARCHAR( 25 ) NOT NULL
) ENGINE = MYISAM ;

just for testing insert some records in the table, paste below sql code to insert records

INSERT INTO `dbtest`.`users` (`id`, `user_name`) VALUES (NULL, 'pradeep'), (NULL, 'CodingCage');

using $.ajax() function the code will be as follow :

$.ajax({    
    type : 'POST',
    url  : 'username-check.php',
    data : $(this).serialize(),
    success : function(data)
    {
    $("#result").html(data);
    }
});

using $.post() function the code will be as follow

$.post("username-check.php", $("#reg-form").serialize())
        .done(function(data){
 $("#result").html(data);
});

index.php

contains jQuery/javaScript code with HTML Form, when user types username in input box then keyup() event will executes and as name was typed it will send ajax POST request to "username-check.php" file and displays that the username is available or not

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live Username Availability Check using PHP PDO and jQuery</title>
<script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{    
 $("#name").keyup(function()
 {  
  var name = $(this).val(); 
  
  if(name.length > 3)
  {  
   $("#result").html('checking...');
   
   /*$.post("username-check.php", $("#reg-form").serialize())
    .done(function(data){
    $("#result").html(data);
   });*/
   
   $.ajax({
    
    type : 'POST',
    url  : 'username-check.php',
    data : $(this).serialize(),
    success : function(data)
        {
              $("#result").html(data);
           }
    });
    return false;
   
  }
  else
  {
   $("#result").html('');
  }
 });
 
});
</script>

</head>

<body>


<form id="reg-form" action="" method="post" autocomplete="off">
<fieldset>
 <div>
    <input type="text" name="name" id="name" placeholder="Username" />
    <span id="result"></span>
    </div>
</fieldset>
</form>
</body>
</html>

username-check.php

this one is simple PHP file which contains only PHP code and works silently at backend of main file and calls via $.ajax() function.

<?php
  
  $host="localhost";
  $user="root";
  $pass="";
  $dbname="dbtest";
  
  $dbcon = new PDO("mysql:host={$host};dbname={$dbname}",$user,$pass);
  
  if($_POST) 
  {
      $name     = strip_tags($_POST['name']);
      
   $stmt=$dbcon->prepare("SELECT user_name FROM users WHERE user_name=:name");
   $stmt->execute(array(':name'=>$name));
   $count=$stmt->rowCount();
      
   if($count>0)
   {
    echo "<span style='color:brown;'>Sorry username already taken !!!</span>";
   }
   else
   {
    echo "<span style='color:green;'>available</span>";
   }
  }
?>

style.css


@charset "utf-8";
/* CSS Document */

*{margin:0; padding:0;}
#reg-form
{
 margin:100px auto;
 padding:25px;
 border:solid #cfcfcf 1px;
 width:50%;
 background:#f9f9f9;
}
fieldset
{
 padding:5px;
 width:60%;
 margin:0 auto;
 border:0;
}
input
{
 width:100%;
 height:35px;
 border:solid #00a2d1 1px;
 padding-left:10px;
 font-family:Verdana, Geneva, sans-serif;
 font-weight:bold;
 font-size:15px;
}
span
{
 font-family:Verdana, Geneva, sans-serif;
 font-weight:bold;
 font-size:15px;
}

that's it guys, we have covered here a simple jQuery Username Availability Checker Script so download and try and if you are facing any issue with this script please feel free to ask.




24 comments:

  1. i like this,
    this is really helpful

    thanks :)

    ReplyDelete
  2. Not Found

    The requested URL /sitefiles/logup/index.php was not found on this server.

    comes up when I try any of the other files as well...any thoughts that could help

    ReplyDelete
    Replies
    1. please drop an actual and exact error or problem, so that i can help you to solve this issue, and please check "/sitefiles/logup/index.php" file is there or not .

      Delete
  3. Hi Pradeep, I wanna ask you the question that. I am posting the data through the PHP MYSQLI direct and that form is updating the data. Its getting values and creating the exact query...! But not rendering the data updated...! Its throwing the old data not an update one. also in DB its not updating the data...! Any HINT...?

    ReplyDelete
    Replies
    1. Hello Saddam Hussain, please check again your code within "username-check.php" which you have updated with MySQLi, this will also work easily with MySQLi , if you found some error then show me your MySQLi code.

      Delete
  4. Thank you for the scripts! It is really helpful for my blog project :)

    ReplyDelete
    Replies
    1. You're welcome Honey Jean,
      keep visiting :)

      Delete
  5. Pradeep bhai
    You are great.You made php,mysql,ajax easier than ever.You are the master....nodoubt.I salute you.

    ReplyDelete
    Replies
    1. Thank you, Adil, for your kind words. These words always inspires me to share my ideas with my readers. connect with us on social media.


      keep visiting :)

      Delete
  6. thanks for all..the password confirmation is not working .
    SMTP Error: Could not authenticate
    dude now im just using wamp server.... not yet host it ..i have a doubt whether i need to host it for password confirmation .please let me know...
    with regards
    arun

    ReplyDelete
    Replies
    1. Hello Arun, you can also use your gmail smtp(i used here) and try script at your localhost just give your gmail credentials...

      Delete
    2. check the GMAIL security setting, if it set on High, change it to low and you will not get that error "SMTP Error: Could not authenticate"

      Delete
    3. thanks for the suggestion...

      Delete
  7. I am unable to download the script please help me to download or send at devangthakar12@gmail.com
    Thanks Pradeep

    ReplyDelete
    Replies
    1. Hello there, i have updated downloading link, download it again...

      Delete
  8. Pradeep bhai.
    Kindly provide coding of 'comment box' with reply option as this one is(of blogger)
    Thanks

    ReplyDelete
  9. Hi, im mostly using yours script only for my project. Very useful and easily can understand..Thank u so much. can you post this username availability live checkup using remote method?

    Thanks!

    ReplyDelete
  10. thanks bro it's amazing working

    ReplyDelete
    Replies
    1. you're welcome, chandu
      keep visiting ...

      Delete
  11. Thank You sir,, It's really helpful to me. Thax again.

    ReplyDelete
  12. I just change the code little bit PDO to MySQLi Object-oriented. and it's work.

    I have little less knowledge of PDO system so i do it in MySQLi Object-oriented .

    Again Thanks Sir for your help. Hope you continued your support. thx

    ReplyDelete
    Replies
    1. You're welcome, ankit...
      keep visiting...

      Delete
  13. I figured out my problem with the connection error message. I needed to add a port assignment to my database name connection

    ReplyDelete