Live Username Availability Checking using Ajax and jQuery. Demo Available
Simple script to check username availability using jQuery and Ajax. Try out demo and use it. I used gif loader and jquery fade in effects to make it fit. You can find many script like this but i want to keep my valuable users here to share their development needs.
Table Structure
|
1 2 3 4 5 |
CREATE TABLE IF NOT EXISTS `username_availablity` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(60) NOT NULL, PRIMARY KEY (`id`) ) |
PHP
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
if($_REQUEST) { $username = $_REQUEST['username']; $query = "select * from username_availablity where username = '".strtolower($username)."'"; $results = mysql_query( $query) or die('ok'); if(mysql_num_rows(@$results) > 0) // not available { echo ' <div id="Error">Already Taken</div> ' } else { echo ' <div id="Success">Available</div> '; } } |
jQuery Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$(document).ready(function() { $('#Loading').hide(); }); function check_username(){ var username = $("#username").val(); if(username.length > 2){ $('#Loading').show(); $.post("check_username_availablity.php", { username: $('#username').val(), }, function(response){ $('#Info').fadeOut(); $('#Loading').hide(); setTimeout("finishAjax('Info', '"+escape(response)+"')", 450); }); return false; } } function finishAjax(id, response){ $('#'+id).html(unescape(response)); $('#'+id).fadeIn(1000); } |
HTML
|
1 2 3 4 5 6 7 8 |
<div><label>User Name</label> <input id="username" name="username" type="text" value="" /> <div id="Info"></div> <span id="Loading"><img src="loader.gif" alt="" /></span></div> <pre lang="php" line="1"> |
Recommended WordPress Themes Store
