Page 1 of 1
PHP AJAX Username Check
Posted: Wed Jul 13, 2011 12:26 pm
by Pazuzu156
I'm using a registration form for registering to the site. I am using jQuery's AJAX library to check usernames without the need for pressing the submit button, but when they click off the textbox, it will check a database using php and return it with json_encode using ajax. Alot to understand, how would I achieve this?
Re: PHP AJAX Username Check
Posted: Sat Jul 16, 2011 12:34 am
by srikanth03565
Hi you can check user name simply by using any events like onblur of username field when u have entered something on user name field and you have moused out then immediately specific function will be called and ajax request will be posted for that
check the sample code
<div >
User Name : <input name="username" type="text" id="username" value="" maxlength="15" />
<span id="msgbox" style="display:none"></span>
</div>
$("#username").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
{
if(data=='no') //if username not avaiable
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
Re: PHP AJAX Username Check
Posted: Sat Jul 16, 2011 1:47 pm
by Pazuzu156
I thank you greatly for this bit, but I rewrote your code just a tad different:
jQuery
Code: Select all
$(document).ready(function() {
$("#message").hide();
});
function go(user) {
$("#message").fadeIn(700).html('Checking...');
$.post('user_availability.php', { user: user }, function(data) {
if(data=='no_user_name') {
$("#message").fadeTo(200,0.1,function() {
$(this).html('No username was entered').fadeTo(900,1);
});
} else if(data=='username_unavailable') {
$("#message").fadeTo(200,0.1,function() {
$(this).html('Username is already in use').fadeTo(900,1);
});
} else {
$("#message").fadeTo(200,0.1,function() {
$(this).html('Username is available').fadeTo(900,1);
});
}
});
}
HTML
Code: Select all
<div >
User Name : <input name="user" type="text" id="user" maxlength="15" onblur="go($(this).val())" value="" />
<span id="message"><!-- message goes here --></span>
</div>
Both do the same, but I figured I'd make a function out of it.
Re: PHP AJAX Username Check
Posted: Sun Jul 17, 2011 8:27 am
by srikanth03565
Your code looks much clean and proper.Any why you have received your answer thanks.
Re: PHP AJAX Username Check
Posted: Sun Jul 17, 2011 10:56 am
by phazorRise
Instead of
you could simply
Code: Select all
$('#username_field').bind('blur',function(e){
var user=$(this).val();
//the stuff
});
use like this !