9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
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
Comments
{ 33 comments }
Anonymous said...

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

Anonymous said...

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

Anonymous said...

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.

alok said...

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

Anonymous said...

not sure what the prefix part is for?

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

thanks for the tutorial, otherwise simply explained. great.

Anonymous said...

This isn't updating the url.

Anonymous said...

Hi I'm Shizik dejanshizik@gmail.com
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

Anonymous said...

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"?

Anonymous said...

prefix probably refers to a database schema name

myschema.mytable

Anonymous said...

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

Anonymous said...

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

Anonymous said...

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

-nancy

Anonymous said...

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

Okn said...

Thanks.

How can i use "mysql_real_escape_string" in this code?

Anonymous said...

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?

Anonymous said...

thank you so much..

Anonymous said...

This is great!

Anonymous said...

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

Anonymous said...

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

Anonymous said...

Awesome THANKSSSSSSSSSSSSSSSSSSSSSSs

Anonymous said...

says username is available even though it isnt.

tomix said...

thanks a lot for this post, very simple, very usefull

tomix said...

thanks a lot for this post, very simple, very usefull

A Karadeniz said...

Thanks

Artyom said...

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

Pouf said...

Thank's, love using twitter plugin in my blog

Anonymous said...

amazing work!! helpful for me

thanks

Anonymous said...

best site ever i seen for learning web programing

Anonymous said...

good tuts...

Anonymous said...

Pretty good!

Anonymous said...

thanks ... u help me a lot

Anonymous said...

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

Sulman Ahmed said...

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?

Post a Comment