Monday, 1 February 2016

How to check Username availability in php and MySQL using Ajax Jquery



In this post we learn how to check username availability in php and MySQL using Ajax Jquery. For this We have to create one php code with using Ajax and Jquery for checking username available or not on page without page refresh. This is a very simple and you can see on many website at the time of registration on that website. Whenever you create account and enter your username then at that time an ajax call request to PHP code at the server side and check username is available or not and send request back to html page with data in html and CSS format.

Now I write some html code. First I create one textbox for entering username.

 <input type="text" name="username" id="username" class="form-control" />  

And span tag for display message on page.

 <span id="availability"></span>  

I have one table tbl user with parameter user id and user name. I have already enter two user data.

 CREATE TABLE IF NOT EXISTS `tbl_user` (  
  `user_id` int(11) NOT NULL AUTO_INCREMENT,  
  `user_name` varchar(250) NOT NULL,  
  PRIMARY KEY (`user_id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;  
 INSERT INTO `tbl_user` (`user_id`, `user_name`) VALUES  
 (1, 'mike'),  
 (2, 'peter');  

First I write ajax jquery code for checking live user name and display message on page.

In Jquery code first I write triggers AJAX call on blur event of text box. Then after I define username variable and store textbox value into this variable.

Now I write ajax request for a PHP page.

First parameter is url for php page.

 url:"check.php",  

second is method, there two method GET method and POST method, I use POST method.

 method:"POST",  

third is form data

 data:{user_name:username},  

fourth is form data type, I use simple text data type.

 dataType:"text",  

and last is success mean output of ajax call from php page.

 success:function(html)  
                {  
                     $('#availability').html(html);  
                }  

Now I write php code for checking user name availability.

In php code first I make database connection.

 $connect = mysqli_connect("localhost", "root", "", "test_db");  

First I write sql query for checking available user name in user table.

 $sql = "SELECT * FROM tbl_user WHERE user_name = '".$_POST["user_name"]."'";  

Execute this query and store result in result variable.

 $result = mysqli_query($connect, $sql);  

Now we check if there row greater than zero means user name already exits in database then it display this result. And If there is zero row means user name not exits in database then it display this result.

 if(mysqli_num_rows($result) > 0)  
      {  
           echo '<span class="text-danger">Username not available</span>';  
      }  
      else  
      {  
           echo '<span class="text-success">Username Available</span>';  
      }  



Complete Code


HTML, Ajax and Jquery Code - username.php


 <html>  
      <head>  
           <title>How to check Username availability in php using Ajax jQuery</title>  
           <script src="jquery.js"></script>  
           <script src="js/bootstrap.js"></script>  
           <link href="css/bootstrap.css" rel="stylesheet" />  
           <style>  
           body  
           {  
                margin:0;  
                padding:0;  
                background-color:#f1f1f1;  
           }  
           .box  
           {  
                width:500px;  
                border:1px solid #ccc;  
                background-color:#fff;  
                border-radius:5px;  
           }  
           #load_tweets  
           {  
                padding:16px;  
                background-color:#f1f1f1;  
                margin-bottom:30px;  
           }  
           #load_tweets p  
           {  
                padding:12px;  
                border-bottom:1px dotted #ccc;  
           }  
           </style>  
      </head>  
      <body>  
           <div class="container box">  
                <div class="form-group">  
                     <h3 align="center">Register Page</h3>  
                     <label>Enter Username</label>  
                     <input type="text" name="username" id="username" class="form-control" />  
                     <span id="availability"></span>  
                </div>  
                <br />  
                <br />  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#username').blur(function(){  
           var username = $(this).val();  
           $.ajax({  
                url:"check.php",  
                method:"POST",  
                data:{user_name:username},  
                dataType:"text",  
                success:function(html)  
                {  
                     $('#availability').html(html);  
                }  
           });  
      });  
 });  
 </script>  


PHP Code - check.php


 <?php  
 //check.php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 if(isset($_POST["user_name"]))  
 {  
      $sql = "SELECT * FROM tbl_user WHERE user_name = '".$_POST["user_name"]."'";  
      $result = mysqli_query($connect, $sql);  
      if(mysqli_num_rows($result) > 0)  
      {  
           echo '<span class="text-danger">Username not available</span>';  
      }  
      else  
      {  
           echo '<span class="text-success">Username Available</span>';  
      }  
 }  
 ?>  

4 comments: