php + ajax username check

i've been trying to get this working but its sending me insane, all i want is when someone inserts there username in this form it tells them if it is available.I seem to be close but am missing something.

is anybody able to point me in the right direction.


echo '<script type="text/javascript" src="jquery.js"></script>';

echo "<script type=\"text/javascript\">\n";
echo "\n";
echo "$(document).ready(function() {\n";
echo " $('#usernameLoading').hide();\n";
echo " $('#username').blur(function(){\n";
echo " $('#usernameLoading').show();\n";
echo " $.post(\"ajaxian.php\", {\n";
echo " username: $('#username').val()\n";
echo " }, function(response){\n";
echo " $('#usernameResult').fadeOut();\n";
echo " setTimeout(\"finishAjax('usernameResult', '\"+escape(response)+\"')\", 400);\n";
echo " });\n";
echo " return false;\n";
echo " });\n";
echo "});\n";
echo "\n";
echo "function finishAjax(id, response) {\n";
echo " $('#usernameLoading').hide();\n";
echo " $('#'+id).html(unescape(response));\n";
echo " $('#'+id).fadeIn();\n";
echo "} //finishAjax\n";
echo "</script>\n";
// Open conection to the database
mysql_connect('localhost', 'root', 'dean2277');
mysql_select_db('genesis');


// Function to check if a username exists inside the database
function check_user_exist($username) {
$username = $_POST['username']; // get the username
$username = trim(htmlentities($username)); // strip some crap out of it
$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 `nuke_users` WHERE `username` = '$username'";
$result = mysql_query($sql);
if(mysql_num_rows($result) > 0) {
//username already exists
echo "<span style=\"color:#f00\">Username Unavailable</span>";
}else{
echo "<span style=\"color:#0c0\">Username Available</span>";
}
echo check_user_exist($username);
}

echo "<fieldset><legend>Registration Form</legend>\n";
echo "<form action=\"ajaxian.php\" method=\"post\">\n";
echo "<p><label for=\"username\">Username:</label> <input type=\"text\" name=\"username\" id=\"username\" />\n";
echo " <span id=\"usernameLoading\"><img src=\"indicator.gif\" alt=\"Ajax Indicator\" /></span>\n";
echo " <span id=\"usernameResult\"></span></p>\n";
echo "<p><label for=\"password\">Password:</label> <input type=\"password\" name=\"password\" id=\"password\"/></p>\n";
echo "<p><input type=\"submit\" name=\"submit\" value=\"Sign Up!\" /></p>\n";
echo "</form>\n";
echo "</fieldset>\n";

Why isn't it working? Whats it doing or rather not doing? Any error messages? Turn on full error reporting.

it seems to drop down the entire form again really quickly and i get no errors with error reporting set to E_ALL

Online example?

The first thing I would do (aside from removing your MySQL 'root' user password from the code you've posted) is to eliminate all those echo statements and just put straight markup and JS in there. Your httpd server and PHP parser will thank you, I will thank you, and it will make it alot easier to work with and edit the JS. Similarly, your form code at the bottom of the script should be straight markup without PHP intervention at all.

Now, you're actually using the script you've loaded with the form to do the database call? Why not use a separate PHP script to do that? This page could be straight markup and JS with no PHP at all if you separate the two. I'd wager that's the hangup here.

Your PHP script should be something simple like

<?php
// checkuser.php
if ( empty($_GET['username']) ) { echo 'FAILED'; exit; }
// db connect code here

// validate and escape username input
if ( ctype_alnum($_GET['username']) && strlen($_GET['username']) <= 25 ) {
$u= mysql_real_escape_string( $_GET['username'] );
$sql= "SELECT COUNT(*) AS valid_user FROM table WHERE username='{$u}'";
if ( mysql_result( mysql_query($sql), 0 ) !== 0 ) {
echo "This username is taken";
} else echo "This username is available";
}
?>


Your jQuery code calls this script using a GET method request and then handles the response.


Perhaps an ideal method would be to use a UNIQUE index on the `username` column (which you should do anyway), and then actually use a POST request to insert a record with the requested username. If the query fails due to the UNIQUE index constraint, you report the username is taken and try again. If not, you simply force the user to complete the registration and perform an UPDATE with the rest of the form data.

thanks for your reply m8,the db details is local i just set them up as i need them but thanks for the reminder :)

i can get it to work like so,

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="jquery.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function()
{
$("#username").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("check.php",{ user_name:$(this).val() } ,function(data)
{
if(data=='no') //if username not avaiable
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);
});
}

});

});
});
</script>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
}
.messagebox{
position:absolute;
width:100px;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;

}
.messageboxerror{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
}

</style>
</head>
<body>
<br />
<br />
<div align="center">
<div >
User Name : <input name="username" type="text" id="username" value="" maxlength="15" />
<span id="msgbox" style="display:none"></span></div>
</div>
</body>
</html>
check.php

<?php
mysql_connect('localhost', 'root', 'password');
mysql_select_db('dbname');

$query = "SELECT * FROM users WHERE username = '{$_POST['username']}'";

$result = mysql_query($query) or die(mysql_error());
if(mysql_num_rows($result)>0){
//username already exists
echo "yes";
}else{
echo "no";
}

?>
and jquery from here http://jquery.com/

which is a lot cleaner your right, the reason i was trying to run it in one file was i would like to intergrate it into my nuke site which would require the js being inserted in "includes/javascript.php" (which is called in the header.php file and then the rest would normally be done via swich code is this possible.