Live User Availability Check Using Ajax

In this tutorial we will learn how to check if a username available or not for registration.
AJAX is the best tool we have for this kind of functionality. In this tutorial you can also learn how to use Improved mysql(mysqli) and using HTML5 validations.

 

Live-User-Availability-Check-Using-Ajax

Steps

  • Collect Username entered by user.
  • Send it to PHP script through AJAX.
  • Check wither user available or not in database.
  • Get back the result through AJAX.
  • Display message to user.

DataBase

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(4) NOT NULL AUTO_INCREMENT,
  `username` varchar(65) NOT NULL DEFAULT '',
  `pass` varchar(65) NOT NULL DEFAULT '',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

For this demo we will use this database table you just run this in your phpmyadmin sql window.

HTML

<form method="get" id="usrform" >
<fieldset>
 <legend>Check User</legend>
 USER: 
 <input type="text" id="txtUser" name="txtUser" placeholder="Enter User Name" required="required"  autofocus="autofocus" /><span id="result"></span>
 <br />
 <br />
 <input type="submit" value="check" id="check" />
</fieldset>
</form>

Here we take a simple form with only input field for user name. Also we are applying HTML5 validations required.autofocus will we used for automatically focus on that input field when page loads.

AJAX(javascipt)

<script type="text/javascript">
window.onload=function() {
var xhr;
var usrform=document.getElementById('usrform');
var usr=document.getElementById('txtUser');
var result=document.getElementById('result');
//onsumit 
usrform.onsubmit=function(){
 //create xmlhttpreqest objects it will work on IE>7,firefox,chrome
 try{
  xhr=new XMLHttpRequest();
 }
 catch(e){
  alert("Sorry! Your Browser doesn't support. Use any latest Browser");
 }
 result.style.background='green';
 result.innerHTML='Checking...';
 
 xhr.open('GET','checkuser.php?usr='+usr.value,false);
 xhr.onreadystatechange = function(){
  if(xhr.responseText){
   //If true user name not available
   result.innerHTML="Sorry! User Name Taken";
   result.style.background="red";
   }
   else{
   //if false user name available
   result.innerHTML="Perfect! User Name available";
   }
 };
 
 xhr.send();
 return false;
};
}
</script>

Here we should write out code under window.onload other wise the some DOM won’t work.

First we are creating XMLHttpRequest object(IE8 and more,firfox,chorme will support). After that we adding value Checking.. to result span and change the background color to green.

We will use Ajax send data to checkuser.php script and we will get back the username if it exits otherwise nothing.
If we get back any result then we will update the result span that user already taken other wise we will update user name available. That’s it.

CSS

#result{
margin:0 0 0 3px;
color: white;
border-radius: 5px;
padding: 2px;
}
fieldset{
padding: 20px;
border-radius: 5px;
border: 1px solid #ddd;
}
input{
border: 1px solid #ddd;
padding: 3px;
width: 300px;
line-height: 24px;
border-radius: 6px;
outline: none;
font-size: 18px;
}
input[type="submit"]{
background: #333;
color: #eee;
text-transform: uppercase;
}

I hope you enjoyed the tutorials.For updates subscribe us..

 

 

 

Please follow and like us:



2 Replies to “Live User Availability Check Using Ajax”

Leave a Comment

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