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");
?>
$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
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>
<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}();
{
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();
});
</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
this solution is wide open to sql injections, at least do a mysql_real_escape_string or filter_input on the incoming data.
ReplyDeleteI think this is only for test purpose.
ReplyDeleteBetter explain in simple way. Less code, you will faster got idea.
If you got point, you can do what you want ;)
Re: "wide open to sql injection"
ReplyDeleteIf 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.
hi,
ReplyDeletei 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
not sure what the prefix part is for?
ReplyDelete{$prefix}users .. isnt this just the table name?
thanks for the tutorial, otherwise simply explained. great.
This isn't updating the url.
ReplyDeleteHi I'm Shizik [email protected]
ReplyDeleteNice 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
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"?
ReplyDeleteprefix probably refers to a database schema name
ReplyDeletemyschema.mytable
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?
ReplyDelete- Mike
it works! thanks a lot. But when i call the Registration.php in thickbox.... AJAX stop functioning..
ReplyDeleteIt works ! thanks a lot
ReplyDeleteHowever when i try to call using thickbox the ajax stop working...
How ???
Can some 1 help me ...
-nancy
Can possible this scripts run in the thickbox
ReplyDeletei try to call the index.php using thickbox.
The checker failed functioning
Thanks.
ReplyDeleteHow can i use "mysql_real_escape_string" in this code?
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.
ReplyDeleteAny ideas on what would cause this?
thank you so much..
ReplyDeleteThis is great!
ReplyDeleteThanks 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).
ReplyDeleteWhen 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
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
ReplyDeleteAwesome THANKSSSSSSSSSSSSSSSSSSSSSSs
ReplyDeletesays username is available even though it isnt.
ReplyDeletethanks a lot for this post, very simple, very usefull
ReplyDeletethanks a lot for this post, very simple, very usefull
ReplyDeleteNice work! Thanks for the big article! It's very useful!
ReplyDeleteThank's, love using twitter plugin in my blog
ReplyDeleteamazing work!! helpful for me
ReplyDeletethanks
best site ever i seen for learning web programing
ReplyDeletegood tuts...
ReplyDeletePretty good!
ReplyDeletethanks ... u help me a lot
ReplyDeleteby using server side validation, you can stop the data from being accepted and entered in the database.
ReplyDeletewhat if we want to check the availability of two input fields on keyup ? how to display message separately at the front of each field?
ReplyDeletemysql_num_rows() expects parameter 1 to be resource, i m stucked with is error
ReplyDeleteany one plz help
urgent