PHP AJAX Username Check
Moderator: General Moderators
PHP AJAX Username Check
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?
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
-
srikanth03565
- Forum Newbie
- Posts: 10
- Joined: Sat Jul 16, 2011 12:13 am
Re: PHP AJAX Username Check
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);
});
}
});
});
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
I thank you greatly for this bit, but I rewrote your code just a tad different:
jQuery
HTML
Both do the same, but I figured I'd make a function out of it.
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);
});
}
});
}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>- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
-
srikanth03565
- Forum Newbie
- Posts: 10
- Joined: Sat Jul 16, 2011 12:13 am
Re: PHP AJAX Username Check
Your code looks much clean and proper.Any why you have received your answer thanks.
- phazorRise
- Forum Contributor
- Posts: 134
- Joined: Mon Dec 27, 2010 7:58 am
Re: PHP AJAX Username Check
Instead of
you could simply
use like this !
Code: Select all
onblur="go($(this).val())"Code: Select all
$('#username_field').bind('blur',function(e){
var user=$(this).val();
//the stuff
});