jQuery Username Availability check.

jQuery Username Availability check.

Hi in this lessons i am going to teach you how to check that a username is available with jQuery. This is very useful for developer as well as the users because they see a nice UI

jQuery username Availability Check.

Download Script

View Demo

index.php

in index.php page their is a simple input field were user put their username and that data is send to a php file this is done is real time using jQuery .keyup(function(){ }); and in the ajax request we have give a response variable in the success object this variable get the response text from the username.php file

,
<form method="post">
 <input type="text" id="username" placeholder="username">
 <span id="feedback"></span>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#username').keyup(function() {
  var username = $(this).val();
  //send the data to a username.php file
  $.ajax({
   url: './username.php',
   type: 'POST',
   data: {username:username},
   beforeSend: function(){
    $('#feedback').text('Searching....');
   },
   //get the response text from the username.php file
   success: function(response){
    $('#feedback').html(response);
   }
  });
 });
});
</script>

username.php

In username.php file the username is coming from the input filed which is in the index.php file. In username.php we are check that the username already in the database or not and outputing the result.

<?php
 //connect to the database
 mysql_connect('localhost','root','');
 mysql_select_db('hunklessons');

 if(isset($_POST['username'])){
  $username = mysql_real_escape_string($_POST['username']);
  $q = mysql_query("SELECT * FROM users WHERE username='$username'");
  $num = mysql_num_rows($q);
  if($num >= 1){
   echo "<span style='color:red'>".$username." Not Available</span>";
  }else{
   echo "<span style='color:green'>".$username." Available</span>";
  }
 }
?>