Live User Availability Check Using Ajax

Published on January 9, 2013

Welcome Guys! How are you? Today we will learn one more useful PHP-AJAX tutorial. Generally when we submit user registration data like user name,email,etc. First we send it to the backed script, check wither the user available or not. If not then one more time need we have to fill the form.  This is a  big wast of time if user not available. In this tutorial we will learn how to check if a username available or not for registration on fly. 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. You can learn more about HTML5 validations at Perfect Form Validations Using HTML5.

Steps 1)Collect Username entered by user. 2)Send it to PHP script through AJAX. 3)Check wither user available or not in database. 4)Get back the result through AJAX. 5)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. Previous days we have to use JavaScript for this functionality. But now we can use HTML5. AJAX(javascipt)

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;
  };
};

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. Styling(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;
}

Usually I don’t like default browser styles so I am adding little styles. That’s it hope you like it.