Live username Checking using Ajax and JQuery | Lessoncup Programming Blog

Sunday, 22 September 2013

Live username Checking using Ajax and JQuery

This lesson will help u to check the user available or not so i write the lesson to my readers using few lines of  jquey,ajax & php,mysql  code.


Step 1

index.php

add this jquery plugin script inside the <HEAD> tag
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

Step 2

i am writing the bellow code to user enters the name in input box and change to next input the ajax request will start the request using given url in ajax URL property usernamecheck.php and get response in message box. just place the bellow code inside the <HEAD>tag.

<script type="text/javascript">

$(document).ready(function(){

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

$("#message").html('<img src="images/loader.gif" align="absmiddle">');

    $.ajax({  
    type: "POST",  
    url: "usernamecheck.php",
    data: "username="+ $("#username").val(),  
    success: function(msg){  

   $("#message").ajaxComplete(function(event, request, settings){   
  
        if(msg=='YES'){
         
         $(this).html('<img src="images/right.png" align="absmiddle">');
    
        }else{
    
          $(this).html(msg);
        }
  });

   } 
   
  }); 

});

});

</script>

Step 3

Now it's time to create usernamecheck.php

hear i am using POST method to get username and store the username in username variable now i am creating a small database using MySql to storing the users data and writing a small query to get the matched users from "users" table from "lessoncup" databasae and i am writing a condition to display the result message.

<?php

if(isset($_POST['username'])) {

$username= $_POST['username'];

mysql_connect("localhost","username","password") or die ("Unable to connect to Localhost");

mysql_select_db("database") or die ("Could not select the database.");

$getusers=mysql_query("select username from users where username='".$username."'");

if(mysql_num_rows($getusers))  {

echo '<img src="images/wrong.png" align="absmiddle">';

} else {

echo 'YES';

}

}
?>

Step 4

Create the database in MySql
CREATE TABLE IF NOT EXISTS `users` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) NOT NULL,
  PRIMARY KEY (`user_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;


Live Demo   Download Script

1 comment :

  1. You should keep the HTML within the jQuery, instead of echoing at one point some HTML and on another point just "yes". Keep it with true or false, and keep the html that needs to be implemented into you jQuery. In small projects this won't be giving any problems, but once you go bigger it's way harder to find all your content.

    Nevertheless it's a good tutorial for people to learn understand how Ajax works. Good job!

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons