PHP AJAX Username Check

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

PHP AJAX Username Check

Post 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?
- Kaleb Klein
------------------------------------
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

Post 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);
});
}
});
});
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: PHP AJAX Username Check

Post 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.
- Kaleb Klein
------------------------------------
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

Post by srikanth03565 »

Your code looks much clean and proper.Any why you have received your answer thanks.
User avatar
phazorRise
Forum Contributor
Posts: 134
Joined: Mon Dec 27, 2010 7:58 am

Re: PHP AJAX Username Check

Post by phazorRise »

Instead of

Code: Select all

onblur="go($(this).val())"
you could simply

Code: Select all

$('#username_field').bind('blur',function(e){
 var user=$(this).val();
   //the stuff
});
use like this !
Post Reply