jQuery Username Availability check.
Wall Script
Wall Script
Wednesday, December 31, 2008

jQuery Username Availability check.

This post about Twitter used jQuery plug-in JavaScript code in registration page  username Availability check and update Screen name.

This is very useful stuff, this is the best way to implement it and the only thing you have to modify just some database connection parameters.


jQuery Plug-in :Download

Step1: Modifiy dbconnection.php

Change MySQL connection parameters in dbconnection.php
<?php

$mysql_hostname = "Host name";
$mysql_user = "UserName";
$mysql_password = "Password";
$mysql_database = "Database Name";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>

Step2: cofigure check.php

Change table name and column name in SQL query.

<?php
// This is a code to check the username from a mysql database table

if(isSet($_POST['username']))
{
$username = $_POST['username'];

include("dbconnection.php");

$sql_check = mysql_query("SELECT user FROM {$prefix}users WHERE user='$username'");

if(mysql_num_rows($sql_check))
{
echo '<span style="color: red;">The username <b>'.$username.'</b> is already in use.</span>';
}
else
{
echo 'OK';
}}
?>

Step 3. Add JQuery framework on your page

jQuery Plug-in :Download
First, you have to download the jQuery plugin and add a link to the framework within the tag <head> of the page:

Step 4. Registration.php Code

HTML code for this example is very simple:

<script src="js/jquery.js" type="text/javascript">/script>
<script type="text/javascript">
pic1 = new Image(16, 16);
pic1.src = "loader.gif";

$(document).ready(function(){

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

var usr = $("#username").val();

if(usr.length >= 3)
{
$("#status").html('<img align="absmiddle" src="loader.gif" /> Checking availability...');

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

$("#status").ajaxComplete(function(event, request, settings){

if(msg == 'OK')
{
$("#username").removeClass('object_error'); // if necessary
$("#username").addClass("object_ok");
$(this).html(' <img align="absmiddle" src="accepted.png" /> ');
}
else
{
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
$(this).html(msg);
}});}});}
else
{
$("#status").html('The username should have at least 3 characters.');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
}});});

//-->

</script>


<div>
<label>User name:</label>
<input type="text" id="username" name="username" class="inn"/>
</div>
<div id="status"></div>



Download source code

Update Screen Name



settings.js : enables jQuery functionalities 
javascript code enables the jQuery functionalities.
var twitter=function()
{
var rtn={updateUrl:function(value){$("#username_url").html(value)},
screenNameKeyUp:function(){
jQuery("#user_screen_name").keyup(function(event){var screen_name=jQuery("#user_screen_name");

}

)
},return rtn}();

Copy jquery.js and settings.js in js folder

Registration.php Final code

<html>
<head>
<script src="js/jquery.js" type="text/javascript">/script>
<script src="js/settings.js" type="text/javascript"></script>

<script type="text/javascript">
pic1 = new Image(16, 16);
pic1.src = "loader.gif";

$(document).ready(function(){

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

var usr = $("#username").val();

if(usr.length >= 3)
{
$("#status").html('<img align="absmiddle" src="loader.gif" /> Checking availability...');

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

$("#status").ajaxComplete(function(event, request, settings){

if(msg == 'OK')
{
$("#username").removeClass('object_error'); // if necessary
$("#username").addClass("object_ok");
$(this).html(' <img align="absmiddle" src="accepted.png" /> ');
}
else
{
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
$(this).html(msg);
}});}});}
else
{
$("#status").html('The username should have at least 3 characters.');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
}});});

//-->

</script>
</head>
<body>
<div>

<label>User name:</label>
<input type="text" id="username" name="username" onkeyup="Twitter.updateUrl(this.value)" class="inn"/>

http://xyz.com/<span id="username_url" class="url">USERNAME</span>

</div>
<div id="status"></div>
<script type="text/javascript">
$( function () {
twitter.screenNameKeyUp();
$('#user_screen_name').focus();
});

</script>
</body>
</html>


Download source code
Visual Database Desing with MySQL Workbench
web notification

33 comments:

  1. this solution is wide open to sql injections, at least do a mysql_real_escape_string or filter_input on the incoming data.

    ReplyDelete
  2. I think this is only for test purpose.

    Better explain in simple way. Less code, you will faster got idea.

    If you got point, you can do what you want ;)

    ReplyDelete
  3. Re: "wide open to sql injection"

    If every code example presented in a tutorial had to be bullet-proof and production ready it would be nearly impossible to make clear the "lesson" in the code.

    Tutorial examples need to be simple and to the point in order to efficiently teach a single lesson. Srinivas is a very generous teacher and a very prolific coder to whom we should all be grateful and not critical of.

    ReplyDelete
  4. hi,

    i want to do the same but not to use php files. i want to do it with jquery or asp.net in which minimal use can be there to the database means server side interaction.

    can anyone suggest something..

    thankyou

    ReplyDelete
  5. not sure what the prefix part is for?

    {$prefix}users .. isnt this just the table name?

    thanks for the tutorial, otherwise simply explained. great.

    ReplyDelete
  6. This isn't updating the url.

    ReplyDelete
  7. Hi I'm Shizik [email protected]
    Nice post!!!
    If you replace this:

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

    with this:

    $("#username").keyup(function()

    you'll don't have to defocus form the username field to check the user name availability.
    With every singe typing in that field checking will be done automaticly.

    I hope someone will help this

    ReplyDelete
  8. I'm wondering about $prefix too. It looks like the table name should be entered in the dbconnection.php file. If so, why the variable name "prefix"?

    ReplyDelete
  9. prefix probably refers to a database schema name

    myschema.mytable

    ReplyDelete
  10. Any idea how to get this to work with Jquery's form validation? In other words, you can select an in-use username, and submit the form anyway. How would I force a user into selecting an available username before permitting form submission?

    - Mike

    ReplyDelete
  11. it works! thanks a lot. But when i call the Registration.php in thickbox.... AJAX stop functioning..

    ReplyDelete
  12. It works ! thanks a lot
    However when i try to call using thickbox the ajax stop working...
    How ???
    Can some 1 help me ...

    -nancy

    ReplyDelete
  13. Can possible this scripts run in the thickbox
    i try to call the index.php using thickbox.
    The checker failed functioning

    ReplyDelete
  14. Thanks.

    How can i use "mysql_real_escape_string" in this code?

    ReplyDelete
  15. I've tried several of these tutorials with the same result. I get the "checking availability" message with the loader.gif and it just sits there forever.

    Any ideas on what would cause this?

    ReplyDelete
  16. thank you so much..

    ReplyDelete
  17. Thanks for the sharing this wonderful code. However, I wanted to know how to stop the user from registration in case the username is not available (i.e. username is already there in the database).

    When i tested the code, it registers the user even when the user name is not available. Could you pls help in letting me know what code should I include so that if the username exists, the user should not be able to register.

    Thanks

    ReplyDelete
  18. I have it inside a form . It works and thanks for the tutorial. But is it possible to make it dont post the form when the username exists ??? now even if the username exists the form is posted thanks

    ReplyDelete
  19. Awesome THANKSSSSSSSSSSSSSSSSSSSSSSs

    ReplyDelete
  20. says username is available even though it isnt.

    ReplyDelete
  21. thanks a lot for this post, very simple, very usefull

    ReplyDelete
  22. thanks a lot for this post, very simple, very usefull

    ReplyDelete
  23. Nice work! Thanks for the big article! It's very useful!

    ReplyDelete
  24. Thank's, love using twitter plugin in my blog

    ReplyDelete
  25. amazing work!! helpful for me

    thanks

    ReplyDelete
  26. best site ever i seen for learning web programing

    ReplyDelete
  27. thanks ... u help me a lot

    ReplyDelete
  28. by using server side validation, you can stop the data from being accepted and entered in the database.

    ReplyDelete
  29. what if we want to check the availability of two input fields on keyup ? how to display message separately at the front of each field?

    ReplyDelete
  30. mysql_num_rows() expects parameter 1 to be resource, i m stucked with is error
    any one plz help
    urgent

    ReplyDelete

mailxengine Youtueb channel
Make in India
X