AJAX

username availability gmail-style (javascript+sql)

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2004

Posts: 29

Reputation: trashed is an unknown quantity at this point

Solved Threads: 0

trashed

Offline

Light Poster

username availability gmail-style (javascript+sql)

Nov 6th, 2008

Hi all.
I am currently developing a CMS for a school project and I wanted to add the function to check, real-time, if a username is already taken. It should be a little bit like what happens when you register for a Gmail or Yahoo! account.
Basically, while the user inputs the desired username in a textbox, I want to make appear next to it a green or red sign (plus a small text) to display availability.
The registered usernames will be in a mysql table which I can query with a very basic SELECT statement.

It should work AS THE USER TYPES, so if he's entering "mrbrown" then it should try to query for every letter.
This will be my first AJAX implementation, so I am asking for a starting point and any suggestion you deem could help me.

Thanks!

•

Join Date: May 2008

Posts: 525

Reputation: Will Gresham is on a distinguished road

Solved Threads: 86

Will Gresham Will Gresham is offline

Offline

Posting Pro

Re: username availability gmail-style (javascript+sql)

Nov 6th, 2008

Th JavaScript code for this will be similar to: (You will need to modify this)

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script type="text/javascript">
function createRequestObject() {
	var ro;
	var browser = navigator.appName;
	if(browser == "Microsoft Internet Explorer") {
		ro = new ActiveXObject("Microsoft.XMLHTTP");
	}else {
		ro = new XMLHttpRequest();
	}
	return ro;
}
var http = createRequestObject();
function sndReq(action) {
	if(action.length < 3) {
		if(action.length == 0) {
			document.getElementById('usernamecheck').innerHTML = "<br />";
			return false;
		}
		document.getElementById('usernamecheck').innerHTML = "Username too short";
		return false;
	}else { 
		http.open('get', 'rpc.php?action='+action);
		http.onreadystatechange = handleResponse;
		http.send(null);
	}
}
  function handleResponse() {
	if(http.readyState == 4) {
		var update = http.responseText;
     		if(update!="This name is Avaliable!") {
			document.getElementById('usernamecheck').innerHTML = "This name is unavaliable, please try again";
		}else {
			document.getElementById('usernamecheck').innerHTML = "<a href='Javascript:EnableDisable()'>"+update+" Click to change</a>";
		}
	}
}
</script>
<script type="text/javascript">
function createRequestObject() {
	var ro;
	var browser = navigator.appName;
	if(browser == "Microsoft Internet Explorer") {
		ro = new ActiveXObject("Microsoft.XMLHTTP");
	}else {
		ro = new XMLHttpRequest();
	}
	return ro;
}
var http = createRequestObject();
function sndReq(action) {
	if(action.length < 3) {
		if(action.length == 0) {
			document.getElementById('usernamecheck').innerHTML = "<br />";
			return false;
		}
		document.getElementById('usernamecheck').innerHTML = "Username too short";
		return false;
	}else { 
		http.open('get', 'rpc.php?action='+action);
		http.onreadystatechange = handleResponse;
		http.send(null);
	}
}
  function handleResponse() {
	if(http.readyState == 4) {
		var update = http.responseText;
     		if(update!="This name is Avaliable!") {
			document.getElementById('usernamecheck').innerHTML = "This name is unavaliable, please try again";
		}else {
			document.getElementById('usernamecheck').innerHTML = "<a href='Javascript<b></b>:EnableDisable()'>"+update+" Click to change</a>";
		}
	}
}
</script>

HTML for the username box:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<input type="text" name="un" onchange="sndReq(this.value)">
<input type="text" name="un" onchange="sndReq(this.value)">

And rpc.php

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<?
	//connect to db first
	$user=mysql_query("SELECT * FROM user_table WHERE un = '".$_REQUEST['action']."'")or die(mysql_error());
	$countrows=mysql_num_rows($user);
	if($countrows > 0) {
		echo "This name is Unavaliable";
	}
	else {
		echo"This name is Avaliable!";
	}
?>
<?
	//connect to db first
	$user=mysql_query("SELECT * FROM user_table WHERE un = '".$_REQUEST['action']."'")or die(mysql_error());
	$countrows=mysql_num_rows($user);
	if($countrows > 0) {
		echo "This name is Unavaliable";
	}
	else {
		echo"This name is Avaliable!";
	}
?>

Note, the PHP code if not good, there is no checking for bad data so it is not secure, just an example

AJAX is not a programming language, scripting language or any other sort of language.
It is acheived by using JavaScript http functions.
So, AJAX = JavaScript.