ajax doesn't check email availability - php

Question

I want to check email availability, but something is wrong here. Inside a form I have:
<input id="inpMail" name="email" type="text" placeholder="E-mail">
JS
$(document).ready(function() {
$("#inpMail").change(function() {
var mail = $("#inpMail").val();
var msgbox = $("#status"); //`status` is a div
if (mail.length > 4) {
$("#status").html('<img src="img/loader.gif" align="absmiddle"> Checking availability...'); //this works
$.ajax({
type: "POST",
url: "ajax.php", // this file is in the same folder
data: "mail="+ mail,
success: function(msg) {
$("#status").ajaxComplete(function(event, request){
if (msg == 'OK') {
msgbox.html('<img src="img/available.png" align="absmiddle">'); //doesn't work
}
else {
msgbox.html(msg); // doesn't work
}
});
}
});
}
else {
$("#status").html('<font color="#cc0000">Please enter atleast 5 letters</font>'); //this works
}
return false;
});
});
ajax.php
$conn = mysql_connect("localhost","root","") or die("Database not connected"); // this message never appears
$db = mysql_select_db("vedic", $conn) or die("Database not connected");
if (isset($_POST['inpMail']))
{
$mail = $_POST['inpMail'];
$sql = mysql_query("select id from members where email='$mail'");
// my db is named `vedic`, table is `members` some fields are `id` and `email`
if (mysql_num_rows($sql))
{
echo '<STRONG>'.$mail.'</STRONG> is already in use.';
}
else
{
echo 'OK';
}
}

Answer 1

You don't need to add the ajaxComplete handler in the success callback as it has already happened. Try this:
success: function(msg) {
if (msg == 'OK') {
msgbox.html('<img src="img/available.png" align="absmiddle">');
}
else {
msgbox.html(msg);
}
}
Also your PHP code is wide open to injection attacks. Use parameterised queries instead.

Answer 2

Replace your javascript with code below,
$(document).ready(function()
{
$("#inpMail").change(function()
{
var mail = $(this).val();
var msgbox = $("#status"); //`status` is a div
if(mail.length > 4)
{
msgbox.html('<img src="img/loader.gif" align="absmiddle"> Checking availability...'); //this works
$.ajax({
type: "POST",
url: "ajax.php", // this file is in the same folder
data: "mail="+ mail,
success: function(msg)
{
if(msg == 'OK')
{
msgbox.html('<img src="img/available.png" align="absmiddle">'); //doesn't work
}
else
{
msgbox.html(msg); // doesn't work
}
}
});
}
else
{
$("#status").html('<font color="#cc0000">Please enter atleast 5 letters</font>'); //this works
}
return false;
});
});
You have extra }); at the end, Also you were repeating yourself with same selector which was defined globally.
PHP
You are sending mail params as posted email address and you are checking for inpMail which will not return true ever.
IN php replace
if (isset($_POST['inpMail']))
with
if (isset($_POST['mail']))