jQuery Username Availability check.

Posted by : Unknown Rabu, 31 Desember 2008

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:

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

Description: jQuery Username Availability check.
Rating: 4.5
Reviewer: Unknown
ItemReviewed: jQuery Username Availability check.