So I am have a mysql database on my local system and connecting to that using PHP. I know there is nothing wrong with the the server (Apache) because I have used it in another calls using just php.
The problem I think is with the "ajax() request
I have only just started using ajax. I followed a tutorial to implement a way to check if a username already exists on the DB asynchronously.
All the code works up until the ajax() request.
I don't get any errors. All that I see on screen is the result of this code:
$("#availability_status").html(' Checking availability...'); //Add a loading image in the span id="availability_status"
I have been searching for a solution all day and it's driving me mad. Thank you in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Register</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() { //When the dom is ready
alert("ready!");
$("#username").change(function() { //if therezs a change in the username textbox
var username = $("#username").val();//Get the value in the username textbox
if(username.length > 3)
{
$("#availability_status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
//Add a loading image in the span id="availability_status"
$.ajax({
type: "POST",
url: "http://localhost/ajax_check_username.php",
data: {username: username},
success: function(server_response){
if(server_response == '0')//if ajax_check_username.php return value "0"
{
$("#availability_status").html('<img src="available.png" align="absmiddle"> <font color="Green"> Available </font> ');
//add this image to the span with id "#availability_status"
}
else if(server_response == '1')//if it returns "1"
{
$("#availability_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Not Available </font>');
}
}
});
}
else
{
$("#availability_status").html('<font color="#cc0000">Username too short</font>');
//if in case the username is less than or equal 3 characters only
}
return false;
});
});
</script>
</head>
<body>
<div id="content">
<strong>Register</strong>
<form action="http://localhost/register2a.php" method="get">
<div class="style_form">
<label for="username">Username :</label>
<input type="text" name="username" id="username" class="form_element"/>
<span id="availability_status"></span> </div>
<div class="style_form">
<label for="full_name">Full Name :</label>
<input type="text" name="full_name" id="full_name" class="form_element"/>
</div>
<div class="style_form">
<label for="email">Email :</label>
<input type="text" name="email" id="email" class="form_element"/>
</div>
<div class="style_form">
<input name="submit" type="submit" value="submit" id="submit_btn" />
</div>
</form>
</div>
</body>
</html>
////here is the php file
<?php
$conn = mysqli_connect('localhost', 'root', 'sherly743759', 'login');
//Include the Database connection file
if(isset($_POST['username']))//If a username has been submitted
{
//check username not taken
$conn = mysqli_connect('localhost', 'root', 'sherly743759', 'login');
$username = mysql_real_escape_string($username);
$query = "SELECT username FROM member WHERE username = '$username';";
$result = mysql_query($query);
if(mysql_num_rows($result) > 0)
{
echo '1'; //Not Available
}
else
{
echo '0'; // Username is available
}
}
?>
I always like to use GET request on AJAX issues, meaning to do jQuery AJAX with type:"GET" and read the parameter with GET on PHP.. So I can easily test the PHP page itself by running it in the browser like this
localhost/ajax_check_username.php?username=something
You're not handling the error case in your Ajax call, just success - so if the Ajax call fails, nothing will ever reset the 'checking availability' status.
Offhand, your PHP is failing at least partially because you're using (but never setting) $username. You're also opening the database twice, but that's probably harmless.
<?php
if(isset($_POST['username']))//If a username has been submitted
{
//check username not taken
$conn = mysqli_connect('localhost', 'root', 'sherly743759', 'login');
$username = mysql_real_escape_string($_POST['username']);
$query = "SELECT username FROM member WHERE username = '$username';";
$result = mysql_query($query);
if(mysql_num_rows($result) > 0)
{
echo '1'; //Not Available
}
else
{
echo '0'; // Username is available
}
}
And you should leave off the closing ?> on PHP files, so you don't accidentally echo extra data and screw up your expected results.
need to check your jquery version. it uses older version 1.3... not compatible with
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js