check username availability on keypress using jquery

Tags

ajax, availability, jquery, keypress, keyup, validation

Username or email availability or any other types of availability check we can do in this way. When user type on a text box an ajax request has made and check what if its available or not.  we only required jquery.js

HTML CODE:

<input name="username" type="text" id="username" />
<label id="user_msg" style="color:#CC0000;"></label>

Javascirpt:

$(document).ready(function() {

		var timeOut = null;	// this used for hold few seconds to made ajax request

		var loading_html = '<img src="ajax-loader.gif" />'; // just an loading image or we can put any texts here

		//when button is clicked
		$('#username').keyup(function(e){

			// when press the following key we need not to make any ajax request, you can customize it with your own way
			switch(e.keyCode)
			{
				//case 8:   //backspace
				case 9:		//tab
				case 13:	//enter
				case 16:	//shift
				case 17:	//ctrl
				case 18:	//alt
				case 19:	//pause/break
				case 20:	//caps lock
				case 27:	//escape
				case 33:	//page up
				case 34:	//page down
				case 35:	//end
				case 36:	//home
				case 37:	//left arrow
				case 38:	//up arrow
				case 39:	//right arrow
				case 40:	//down arrow
				case 45:	//insert
				//case 46: 	//delete
					return;
			}
			if (timeOut != null)
			    clearTimeout(ajaxCallTimeoutID);
			timeOut = setTimeout(is_available, 1000);  // delay delay ajax request for 1000 milliseconds
			$('#user_msg').html(loading_html); // adding the loading text or image
		});
  });
function is_available(){
	//get the username
	var username = $('#username').val();

	//make the ajax request to check is username available or not
	$.post("availability.php", { username: username },
	function(result)
	{
		if(result != 0)
		{
			$('#user_msg').html('Not Available');
		}
		else
		{
			$('#user_msg').html('<span style="color:#006600;">Available</span>');
		}
	});

}

PHP: Put your way to searching, you can make any array search or you can check it from database or flat file. I check it from database here is the code

<?php
mysql_connect('localhost', 'root', '');
mysql_select_db('db_name');
$username = mysql_real_escape_string($_POST['username']);
$result = mysql_query('select username from user_table where username = "'. $username .'"');
$cnt = mysql_num_rows($result);
print($cnt);
?>

Its work with me very well 🙂

Advertisement