Question

I am making a registration table which will check if the cellphone number typed is in use like in twitter’s username check. My code looks perfect but I keep getting ‘Checking number availability’ its like ajax is not POSTing my requests. Help Please 🙂
here is the relevant ajax code bits

<script type="text/javascript">
$(document).ready(function()//When the dom is ready 
{
$("#cellphone_number").change(function() 
{ //if theres a change in the username textbox

var phonenumber = $("#cellphone_number").val();//Get the value in the username textbox
if(phonenumber.length == 13)//if the lenght equal to 13 characters
{
$("#availability_status").html('<align="absmiddle"><font color="#00FF33">Checking Number availability...</font>');
//Add a loading image in the span id="availability_status"

$.ajax({  //Make the Ajax Request
    type: "POST", 
    url: "../Functions/ajax_check_number.php",  //file name
    data: ("number="+phonenumber),  //data
    success: function(server_response)
    {     
   $("#availability_status").ajaxComplete(function(event, request){ 

    if(server_response == '0')//if ajax_check_username.php return value "0"
    { 
    $("#availability_status").html('<align="absmiddle"> <font color="#00FF33">Number is Available </font>  ');
    //add this image to the span with id "availability_status"
    }  
    else  if(server_response == '1')//if it returns "1"
    {  
     $("#availability_status").html('<align="absmiddle"> <font color="#FF0000">Number already in use</font>');
    }  

   });
   } 

  }); 

}
else
{

$("#availability_status").html('<font color="#FF0000">Number too short</font>');
//if in case the username is less than or equal 3 characters only 
}

return false;
});

});
</script>

Answer 1

Now the code is edited at least to a level where even a beginner like me in AJAX and Javascript can understand. This does the job perfectly. Add some GIF images to give a “visual” response to the client side user especially when checking the database.

<script type="text/javascript">
$(document).ready(function()//When the dom is ready
$(document).ready(function()//When the dom is ready
{
$("#cellphone_number").change(function()

{ //if there's a change in the cellphone_number textbox
var phonenumber = $("#cellphone_number").val();//Get the value in the username textbox
if(phonenumber.length == 13)//if the length is equal to 13 characters
{
$("#availability_status").html('< align="absmiddle" >&nbsp;<font 
color="#00FF33">Checking Number availability...</font>');
//Add a loading image in the span id="availability_status"
$.ajax({  //Make the Ajax Request
type: "POST", 
url: "../Functions/ajax_check_number.php",  //file name
data: {number:$("#cellphone_number").val()},//data    
dataType: 'json',  
success: function(server_response)
{     
$("#availability_status").ajaxComplete(function(event, request)
{     
if(server_response == '0')//if ajax_check_number.php return value "0"
{ 
$("#availability_status").html('<align="absmiddle"> <font color="#00FF33">Number is Available </font>  ');
//add this image to the span with id "availability_status"
}  
else  if(server_response == '1')//if it returns "1"
{  
 $("#availability_status").html('<align="absmiddle"> <font color="#FF0000">Number already in use</font>');
}
  });
 } 
 });
}
else
{

$("#availability_status").html('<font color="#FF0000">Number too short</font>');
//if in case the number is less than 13 characters only 
}
return false;
});
});
</script>