title: Checking username on local server using jquery, ajax and php ajax() not connecting
body: <p>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.</p>
  
  <p>The problem I think is with the "ajax() request</p>
  
  <p>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.</p>
  
  <p>All the code works up until the ajax() request.</p>
  
  <p>I don't get any errors. All that I see on screen is the result of this code:</p>
  
  <p>$("#availability_status").html('&nbsp;Checking availability...');
                          //Add a loading image in the span id="availability_status"</p>
  
  <p>I have been searching for a solution all day and it's driving me mad. 
  Thank you in advance!</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
            &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
          &lt;title&gt;Register&lt;/title&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;
          &lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(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 &gt; 3)
                      {
                          $("#availability_status").html('&lt;img src="loader.gif" align="absmiddle"&gt;&amp;nbsp;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('&lt;img src="available.png" align="absmiddle"&gt; &lt;font color="Green"&gt; Available &lt;/font&gt;  ');
                                          //add this image to the span with id "#availability_status"
                                      }
                                      else  if(server_response == '1')//if it returns "1"
                                      {
                                          $("#availability_status").html('&lt;img src="not_available.png" align="absmiddle"&gt; &lt;font color="red"&gt;Not Available &lt;/font&gt;');
                                      }
  
  
                              }
  
                          });
  
                      }
                      else
                      {
  
                      $("#availability_status").html('&lt;font color="#cc0000"&gt;Username too short&lt;/font&gt;');
                      //if in case the username is less than or equal 3 characters only
                      }
                      return false;
                  });
              });
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="content"&gt;
      &lt;strong&gt;Register&lt;/strong&gt;
        &lt;form action="http://localhost/register2a.php" method="get"&gt;
          &lt;div class="style_form"&gt;
            &lt;label for="username"&gt;Username :&lt;/label&gt;
            &lt;input type="text" name="username" id="username" class="form_element"/&gt;
            &lt;span id="availability_status"&gt;&lt;/span&gt; &lt;/div&gt;
          &lt;div class="style_form"&gt;
            &lt;label for="full_name"&gt;Full Name :&lt;/label&gt;
            &lt;input type="text" name="full_name" id="full_name" class="form_element"/&gt;
          &lt;/div&gt;
          &lt;div class="style_form"&gt;
            &lt;label for="email"&gt;Email  :&lt;/label&gt;
            &lt;input type="text" name="email" id="email" class="form_element"/&gt;
          &lt;/div&gt;
          &lt;div class="style_form"&gt;
            &lt;input name="submit" type="submit" value="submit" id="submit_btn" /&gt;
          &lt;/div&gt;
        &lt;/form&gt;
       &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>////here is the php file</p>
  
  <pre><code>&lt;?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) &gt; 0)
  {
  echo '1'; //Not Available
  }
  else
  {
  echo '0';  // Username is available
  }
  
  }
  
  ?&gt;
  </code></pre>