checking availability of user name in reg form

[arunrr]

Hello,

All files included here:

http://www.bcci.com/allfiles.txt

I have the registration form (code below). Once the form is filled, register.php updates the database after the appropriate checks.

What i am looking for is an intermediate check. Right after the username input field, I provided a "Check Avaiability" button. This button must not call "register.php". The intent here is to call "available.php" and provide the appropriate pop-up based on whether the username is available or not. If, 'No', following the alert pop-up, the Username field must be reset and this field must be the focus to re-enter username. If 'Yes', following the appropriate alert pop-up, the username field must not be disturbed and the focus must change to the next field.

Help is much appreciated.

Arun

 

[jpadie]

the majority of this is javascript and would probably be better answered in the javascript forum.

I will leave it as an exercise for you to use this approach in your code rather than examine and rewrite your code for you.

<?php
//connect to database
$test = empty($_POST['username']) ? null : trim($_POST['username']);
$result = false;
if (!empty($test)){
	$query = "Select count(*) as c from tablename where username like ('" . mysql_real_escape_string($_POST['username']). "')";
	$r = mysql_query($query);
	if ($r){
		$row = mysql_fetch_object($r);
		$result = $row->c > 0 ? false : true;
	}
}
$result = $result === true ? 'ok' : 'NA';
$return = array('result'=>$result);
echo json_encode($return);
die;
?>

<script type="text/javascript" src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>[/URL]
<script type="text/javascript">
	var t = false;
	$('document').ready(function(){
		
		$("#username").bind('change', function(e){
			t = false;
		});
		
		$("#xSubmit").bind('click', function(e){
			if (t == false){
				doCheck();
				if (t==false){
					e.preventDefault();
					e.stopPropagation();
				}
			}
		})
		
		$('#checkAvailability').bind('click', function(e){
			e.preventDefault();
			e.stopPropagation();
			doCheck();
		});
	});
	
	function doCheck(){
		var d = {username: $('#username').val()};
		$.post('available.php', d, function(data){
			if(data.result == 'ok'){
				$('#anotherField').focus();
				$('#error').hide();
				$('#ok').fadeIn('fast');
				t = true;
			} else {
				$('#username')	.val('')
								.focus();
				$('#ok').hide();
				$('#error').fadeIn('fast');
				t = false;
			}
		}, 'json');	
	}
</script>
<style type="text/css">
	#error, #ok{display:none;}
	#error{color:red;}
	#ok {color:green;}
</style>
<form action="process.php">
	User name:<input type="text" name="username" id="username" />&nbsp;<input type="button" name="checkAvailability" value="Check Availability"/>
	<div id="error">That username has already been taken</div>
	<div id="ok">That username is available</div>
	Next field: <input type="text" name="somethingelse" id="anotherField" /><br/>
	<input type="submit" name="xsubmit" id="xSubmit" value="Create Account" />
</form>