Check Username Signup

Tom Westcott Apr 19, 2006

General

This script does a Gmail-style check on the username supplied to see if it is a unique username, using the Ajax method (via the Sajax development version).

Test the script here.

Notes

Created by: Tom Westcott
Web Site: http://www.cyberdummy.co.uk/

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: Sajax2.php

<?php
if (!isset($SAJAX_INCLUDED)) {

	/*
	 * GLOBALS AND DEFAULTS
	 *
	 */
	$sajax_debug_mode = 0;
	$sajax_export_list = array();
	$sajax_request_type = "GET";
	$sajax_remote_uri = "";

	/*
	 * CODE
	 *
	 */

	//
	// Initialize the Sajax library.
	//
	function sajax_init() {
	}

	//
	// Helper function to return the script's own URI.
	//
	function sajax_get_my_uri() {
		global $REQUEST_URI;

		return $REQUEST_URI;
	}
	$sajax_remote_uri = sajax_get_my_uri();

	//
	// Helper function to return an eval()-usable representation
	// of an object in JavaScript.
	//
	function sajax_get_js_repr($value) {
		$type = gettype($value);

		if ($type == "boolean" ||
			$type == "integer") {
			return "parseInt($value)";
		}
		elseif ($type == "double") {
			return "parseFloat($value)";
		}
		elseif ($type == "array" || $type == "object" ) {
			//
			// XXX Arrays with non-numeric indices are not
			// permitted according to ECMAScript, yet everyone
			// uses them.. We'll use an object.
			//
			$s = "{ ";
			if ($type == "object") {
				$value = get_object_vars($value);
			}
			foreach ($value as $k=>$v) {
				$esc_key = sajax_esc($k);
				if (is_numeric($k))
					$s .= "$k: " . sajax_get_js_repr($v) . ", ";
				else
					$s .= "\"$esc_key\": " . sajax_get_js_repr($v) . ", ";
			}
			if (count($value))
				$s = substr($s, 0, -2);
			return $s . " }";
		}
		else {
			$esc_val = sajax_esc($value);
			$s = "'$esc_val'";
			return $s;
		}
	}

	function sajax_handle_client_request() {
		global $sajax_export_list;

		$mode = "";

		if (! empty($_GET["rs"]))
			$mode = "get";

		if (!empty($_POST["rs"]))
			$mode = "post";

		if (empty($mode))
			return;

		$target = "";

		if ($mode == "get") {
			// Bust cache in the head
			header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");    // Date in the past
			header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
			// always modified
			header ("Cache-Control: no-cache, must-revalidate");  // HTTP/1.1
			header ("Pragma: no-cache");                          // HTTP/1.0
			$func_name = $_GET["rs"];
			if (! empty($_GET["rsargs"]))
				$args = $_GET["rsargs"];
			else
				$args = array();
		}
		else {
			$func_name = $_POST["rs"];
			if (! empty($_POST["rsargs"]))
				$args = $_POST["rsargs"];
			else
				$args = array();
		}

		if (! in_array($func_name, $sajax_export_list))
			echo "-:$func_name not callable";
		else {
			echo "+:";
			$result = call_user_func_array($func_name, $args);
			echo "var res = " . trim(sajax_get_js_repr($result)) . "; res;";
		}
		exit;
	}

	function sajax_get_common_js() {
		global $sajax_debug_mode;
		global $sajax_request_type;
		global $sajax_remote_uri;

		$t = strtoupper($sajax_request_type);
		if ($t != "" && $t != "GET" && $t != "POST")
			return "// Invalid type: $t.. \n\n";

		ob_start();
		?>

		// remote scripting library
		// (c) copyright 2005 modernmethod, inc
		var sajax_debug_mode = <?php echo $sajax_debug_mode ? "true" : "false"; ?>;
		var sajax_request_type = "<?php echo $t; ?>";
		var sajax_target_id = "";

		function sajax_debug(text) {
			if (sajax_debug_mode)
				alert("RSD: " + text)
		}
 		function sajax_init_object() {
 			sajax_debug("sajax_init_object() called..")

 			var A;
			try {
				A=new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					A=new ActiveXObject("Microsoft.XMLHTTP");
				} catch (oc) {
					A=null;
				}
			}
			if(!A && typeof XMLHttpRequest != "undefined")
				A = new XMLHttpRequest();
			if (!A)
				sajax_debug("Could not create connection object.");
			return A;
		}
		function sajax_do_call(func_name, args) {
			var i, x, n;
			var uri;
			var post_data;
			var target_id;

			sajax_debug("in sajax_do_call().." + sajax_request_type + "/" + sajax_target_id);
			target_id = sajax_target_id;
			if (sajax_request_type == "")
				sajax_request_type = "GET";

			uri = "<?php echo $sajax_remote_uri; ?>";
			if (sajax_request_type == "GET") {

				if (uri.indexOf("?") == -1)
					uri += "?rs=" + escape(func_name);
				else
					uri += "&rs=" + escape(func_name);
				uri += "&rst=" + escape(sajax_target_id);
				uri += "&rsrnd=" + new Date().getTime();

				for (i = 0; i < args.length-1; i++)
					uri += "&rsargs[]=" + escape(args[i]);

				post_data = null;
			}
			else if (sajax_request_type == "POST") {
				post_data = "rs=" + escape(func_name);
				post_data += "&rst=" + escape(sajax_target_id);
				post_data += "&rsrnd=" + new Date().getTime();

				for (i = 0; i < args.length-1; i++)
					post_data = post_data + "&rsargs[]=" + escape(args[i]);
			}
			else {
				alert("Illegal request type: " + sajax_request_type);
			}

			x = sajax_init_object();
			x.open(sajax_request_type, uri, true);

			if (sajax_request_type == "POST") {
				x.setRequestHeader("Method", "POST " + uri + " HTTP/1.1");
				x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			}

			x.onreadystatechange = function() {
				if (x.readyState != 4)
					return;

				sajax_debug("received " + x.responseText);

				var status;
				var data;
				var txt = x.responseText.replace(/^\s*|\s*$/g,"");
				status = txt.charAt(0);
				data = txt.substring(2);
				if (status == "-")
					alert("Error: " + data);
				else {
					if (target_id != "")
						document.getElementById(target_id).innerHTML = eval(data);
					else {
						try {
							var callback;
							var extra_data = false;
							if (typeof args[args.length-1] == "object") {
								callback = args[args.length-1].callback;
								extra_data = args[args.length-1].extra_data;
							} else {
								callback = args[args.length-1];
							}
							callback(eval(data), extra_data);
						} catch (e) {
							alert(e + ": Could not eval " + data);
						}
					}
				}
			}
			sajax_debug(func_name + " uri = " + uri + "/post = " + post_data);
			x.send(post_data);
			sajax_debug(func_name + " waiting..");
			delete x;
			return true;
		}

		<?php
		$html = ob_get_contents();
		ob_end_clean();
		return $html;
	}

	function sajax_show_common_js() {
		echo sajax_get_common_js();
	}

	// javascript escape a value
	function sajax_esc($val)
	{
		$val = str_replace("\\", "\\\\", $val);
		$val = str_replace("\r", "\\r", $val);
		$val = str_replace("\n", "\\n", $val);
		return str_replace('"', '\\"', $val);
	}

	function sajax_get_one_stub($func_name) {
		ob_start();
		?>

		// wrapper for <?php echo $func_name; ?>

		function x_<?php echo $func_name; ?>() {
			sajax_do_call("<?php echo $func_name; ?>",
				x_<?php echo $func_name; ?>.arguments);
		}

		<?php
		$html = ob_get_contents();
		ob_end_clean();
		return $html;
	}

	function sajax_show_one_stub($func_name) {
		echo sajax_get_one_stub($func_name);
	}

	function sajax_export() {
		global $sajax_export_list;

		$n = func_num_args();
		for ($i = 0; $i < $n; $i++) {
			$sajax_export_list[] = func_get_arg($i);
		}
	}

	$sajax_js_has_been_shown = 0;
	function sajax_get_javascript()
	{
		global $sajax_js_has_been_shown;
		global $sajax_export_list;

		$html = "";
		if (! $sajax_js_has_been_shown) {
			$html .= sajax_get_common_js();
			$sajax_js_has_been_shown = 1;
		}
		foreach ($sajax_export_list as $func) {
			$html .= sajax_get_one_stub($func);
		}
		return $html;
	}

	function sajax_show_javascript()
	{
		echo sajax_get_javascript();
	}


	$SAJAX_INCLUDED = 1;
}
?>

PHP

Paste this code at the very top of your HTML document, above the DOCTYPE tag.

<?php
// Include the Sajax library
include "Sajax2.php";

// Open conection to the database
mysql_connect('localhost', 'username', 'password');
mysql_select_db('database');

/*
CREATE TABLE `users` (
`user_id` INT( 9 ) NOT NULL AUTO_INCREMENT ,
`username` VARCHAR( 50 ) NOT NULL ,
`password` VARCHAR( 32 ) NOT NULL ,
PRIMARY KEY ( `user_id` ) ,
UNIQUE (`username`)
);

INSERT INTO `users` ( `username` , `password` ) VALUES ('username', 'password');
INSERT INTO `users` ( `username` , `password` ) VALUES ('tom', 'password');
INSERT INTO `users` ( `username` , `password` ) VALUES ('bill', 'password');
INSERT INTO `users` ( `username` , `password` ) VALUES ('bob', 'password');
*/

// Function to check if a username exists inside the database
function check_user_exist($username) {
	$username = mysql_escape_string($username);
	// Make a list of words to postfix on username for suggest
	$suggest = array('007', '1', 'theman', 'rocks');
	//$suggest = array();
	$sql = "SELECT `username` FROM `users` WHERE `username` = '$username'";
	$result = mysql_query($sql);
	if(mysql_num_rows($result) > 0) {
		// Username not available
		$avail[0] = 'no';
		$i = 2;
		// Loop through suggested ones checking them
		foreach($suggest AS $postfix) {
			$sql = "SELECT `username` FROM `users` WHERE `username` = '".$username.$postfix."'";
			$result = mysql_query($sql);
			if(mysql_num_rows($result) < 1) {
				$avail[$i] = $username.$postfix;
				$i ++;
			}
		}
		$avail[1] = $i - 1;
		return $avail;
	}
	// Username is available
	return array('yes');
}

sajax_init(); // Intialize Sajax
//$sajax_debug_mode = 1; //Uncomment to put Sajax in debug mode
sajax_export("check_user_exist"); // Register the function
sajax_handle_client_request(); // Serve client instances
?>

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#available {
  display: none;
  color: green;
}
#not_available {
  display: none;
  color: red;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="Sajax2.php"></script>

	<?php
	sajax_show_javascript();
	?>
	function check_handle(result) {
		if(result[0] == 'yes') {
			document.getElementById('not_available').style.display = 'none';
			document.getElementById('available').style.display = 'block';
		}
		else {
			document.getElementById('available').style.display = 'none';
			document.getElementById('not_available').style.display = 'block';
			var str = 'Sorry that username is not available try these <br />';
			for(i = 1; i < result[1]; i++) {
				str += "<input type=\"radio\" name=\"try\" onclick=\"switch_username('"+result[i+1]+"')\"/>" + result[i+1] + "<br />";
			}
			document.getElementById('not_available').innerHTML = str;
		}
	}

	function check_user_exist() {
		var username = document.getElementById('username').value;
		x_check_user_exist(username, check_handle);
	}

	function switch_username(username) {
		document.getElementById('username').value = username;
	}

Body

Paste this code into the BODY section of your HTML document

<form>
	<input type="text" name="username" id="username" size="20" value="tom">
	<input type="button" name="check" value="Check Username"
		onclick="check_user_exist(); return false;">
	<div id="available">
		Username is available!
	</div>
	<div id="not_available">
		Sorry that username is not available.
	</div>
</form>

Leave a Response

(5 comments)

Good Website for javascript related solutions

kranthi kumar Oct 14, 2008

Thanks! I've been looking for something like this, works well with the way my page is setup.

Jeni Mar 15, 2008

It work fine now.

Lee Oct 3, 2007

when entering email address and clicking on the button to email the script to me the resulting email has a link to the file to download it BUT just get a 404 NOT FOUND

Kerry Kurtz Sep 14, 2007

Sorry, but none of these work.I've tried ALL of the codes for the 'check username signup' code.All you do is type in the box and the words 'this username is available!' and 'this username is unavailable.' ALWAYS appear so you don't know if it's available, or not.I would use this code but i can't because it doesn't work!If you could,somehow upgrade it and make it work.I want one of these but this one is the only 1 i can find-and it doesn't work at all.too bad.

alyssa Dec 16, 2006

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details