Live Availability Checking with jQuery.
Wall Script
Follow Me:
Thursday, December 17, 2009

Live Availability Checking with jQuery.

I received a mail from my reader that asked to me how to implement live username availability checking. So I had prepared a simple and understanding tutorial with changing background color using jQuery and Ajax. Take a look at live demo.

Live Availability Checking with jQuery.

Download Script     Live Demo

jQuery 1.3 with PHP

user_check.php
$('#username').change(function(){} - username is the ID of the input. Using $("#username").val("id") calling input field value. First checking the value string length max 3 (username.length > 3))

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
"></script>
<script type="text/javascript">
$(document).ready(function()
{

$("#username").change(function()
{
var username = $("#username").val();
var msgbox = $("#status");

if(username.length > 3)
{
$("#status").html('<img src="loader.gif">&nbsp;Checking availability.');

$.ajax({
type: "POST",
url: "check_ajax.php",
data: "username="+ username,
success: function(msg){
$("#status").ajaxComplete(function(event, request){

if(msg == 'OK')
{
// if you don't want background color remove these following two lines
$("#username").removeClass("red"); // remove red color
$("#username").addClass("green"); // add green color
msgbox.html('<img src="yes.png"> <font color="Green"> Available </font>');
}
else
{
// if you don't want background color remove these following two lines
$("#username").removeClass("green"); // remove green color
$("#username").addClass("red"); // add red  color
msgbox.html(msg);
}
});
}
});

}
else
{
// if you don't want background color remove this following line
$("#username").addClass("red"); // add red color
$("#status").html('<font color="#cc0000">Enter valid User Name</font>');
}
return false;
});
});
</script>
<input type="text" name="username" id="username" />
<span id="status"></span>

check_ajax.php
Contains PHP code.
<?php
include('db.php');
if(isSet($_POST['username']))
{
$username = $_POST['username'];
$username = mysql_real_escape_string($username);
$sql_check = mysql_query("SELECT user_id FROM users WHERE username='$username'");
if(mysql_num_rows($sql_check))
{
echo '<font color="#cc0000"><b>'.$username.'</b> is already in use.</font>';
}
else
{
echo 'OK';
}
}
?>



CSS Code
body
{
font-family:Arial, Helvetica, sans-serif
}
#status
{
font-size:11px;
margin-left:10px;
}
.green
{
background-color:#CEFFCE;
}
.red
{
background-color:#FFD9D9;
}

Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


46 comments:

  1. LI love the every effort you put on to expalin, really awesome and useful post,.. thankk u... :)

    ReplyDelete
  2. thanks so much for this tutorial, I have a different question; How can I get a comment box like this? if you could answer that would be great thanks again

    ReplyDelete
  3. Just great, can put timer on image loader by example 3 seconds 2 seconds qherever i want ??

    ReplyDelete
  4. can u use timer in the above code... me struggling .. Plz help

    ReplyDelete
  5. USEFUL AND NICE.
    Thanks.

    ReplyDelete
  6. A very nice script, though if you try one and its not available and you try another after the loading animation is finished it will show the previous result for a short second. Just thought I would mention it :).
    A script I will for sure use!

    ReplyDelete
  7. This is awesome! Exactly what I've been looking for for my forms. Well done!

    ReplyDelete
  8. thank you ,perfect work

    ReplyDelete
  9. very nice! thanks for sharing!

    ReplyDelete
  10. hey nice code..use comments so that code will be more understandable..

    ReplyDelete
  11. Thanks Srinivas!

    Following you on twitter now, this is probably the best page on the net that shows how to use jQuery and other great techniques!

    Best Regards

    Charlie

    ReplyDelete
  12. Just a tip!

    You´ve made a variable stating that status is $("#status) div.

    Use that in all places instead of the:

    $("#status").html( mg src="loader.gif"> Checking availability.');

    like-> status.html('img....'>" Checking availability.');

    Thank you for the best learningsite on the web!

    ReplyDelete
  13. Awesome bro, it saved me a life time..
    thank you for sharing..

    ReplyDelete
  14. Not too friendly for someone without too much experience :-(

    Could not get it to work.

    Too complicated....not enough explanation of where things go.

    But I'm sure if you're already a web developer with LOT and LOTS of knowledge it's a breeze...so thanks !

    ReplyDelete
  15. thank you for every lesson in your website

    ReplyDelete
  16. Goooooooooooooooood!

    ReplyDelete
  17. mysql_num_rows(): supplied argument is not a valid MySQL result resource in E:\xampp\htdocs\live_availability\check_ajax.php on line 12

    ReplyDelete
  18. hello... i want to use ur code with jsp.... please tell me how it would be done... i tried it and its working fine in php... i changed the file name to jsp where it is calling the php file(check_ajax.php) but its not working.... please tell me as soon as possible....

    ReplyDelete
  19. sir , i need your help .may i

    ReplyDelete
  20. This is really nice..Thanks for sharing you knowledge..

    ReplyDelete
  21. how can i check email live availability
    with validation

    ReplyDelete
  22. Warning: mysql_num_rows(): supplied argument is not a valid MySQL result resource in /username_checker_live/check_ajax.php on line 12
    OK

    ReplyDelete
  23. mysql_num_rows() error means that your sql query has an error. Check for the syntax and also the spelling of your table and field names. also ensure if you have used '$variablename' in quotes.

    ReplyDelete
  24. not work for me "Checking availability."

    ReplyDelete
  25. it works fine..!!
    but i have a issue when i use it with form submission.it does prompt error but not stops at that point rather it gives me duplicate entry !! i have used return false .

    ReplyDelete
  26. This is great thank you! How do I add a line of code that automatically prohibits spaces in usernames?

    ReplyDelete
  27. It works fine if i check the availability in one table, suppose i want to check in more than one table or the whole database, how can i do it???

    ReplyDelete
  28. Your site was very awsome .... I like man

    ReplyDelete
  29. Hello bro,

    first time i used it, it worked.
    but now, it stacked, indicator checker keep running and running

    whats wrong?

    ReplyDelete
  30. Can we do this in spring mvc using only jsp's? Need help with this validation for spring mvc environment and jsp pages.

    ReplyDelete
  31. Could'nt be be better. Works perfectly. Thanks Srinivas

    ReplyDelete
  32. You are providing very useful information to us.Thnk u Sir..!

    ReplyDelete

Make in India