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.
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
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 3characters.');
$("#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>
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 3characters.');
$("#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>
2 comments:
check this one !
http://workwithphp.info/?p=234
check this one !
http://workwithphp.info/?p=234
Post a Comment