title: PHP and AJAX login form
body: <p><strong>Hello</strong>
  I know this subject has been proposed before, but no one has done the AJAX manipulation standard like i did. I'm newbie to AJAX and jQuery</p>
  
  <p>The problem I have here is that I'm not sure that the js function "ajaxPostCallManip()" reaches to "login.php"!!</p>
  
  <p>I've made a couple of alert()s but nothing appears...Please help</p>
  
  <p><strong>HTML CODE</strong></p>
  
  <pre><code>    &lt;link rel="stylesheet" type="text/css" href="jQuery-Files/jquery.mobile-1.3.1.css"/&gt;
      &lt;script type="text/javascript" src="jQuery-Files/jquery-2.0.2.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jQuery-Files/jquery.mobile-1.3.1.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/ajax.js"&gt;&lt;/script&gt;
  
  &lt;div data-role="page" id="loginDialog"&gt;
      &lt;header data-role="header"&gt;
          &lt;h3 style="margin-left: auto; margin-right: auto;"&gt;Login or &lt;a href="#regpage"      
              data-transition="flip"&gt;Register&lt;/a&gt;&lt;/h3&gt;
      &lt;/header&gt;
      &lt;div data-role="content"&gt;
          &lt;form method="POST" action="" onsubmit="check_login(); return false;"&gt;
               &lt;fieldset data-role="contolgroup"&gt;                            
                    &lt;div data-role="fieldcontain"&gt;                    
                         &lt;label for="login_username"&gt;Username&lt;/label&gt;
                         &lt;input type="text" name="login_username" id="login_username" 
                                placeholder="username" /&gt;
  
                         &lt;label for="login_pwd"&gt;Password&lt;/label&gt;
                         &lt;input type="password" name="login_pwd" id="login_pwd" 
                                placeholder="password" /&gt;
  
                         &lt;div style="margin: auto; text-align: center;"&gt;
                             &lt;label for="login_submit" class="ui-hidden-accessible"&gt;                 
                                    Submit&lt;/label&gt;
                             &lt;button onclick="this.form.submit()" value="Submit" 
                                     data-inline="true"&gt;&lt;/button&gt; 
                             &lt;span class="error" id="login_err" name="login_err" 
                                   style="display: none; font-size: 12px; 
                                   text-align: center;"&gt;status&lt;/span&gt;
                         &lt;/div&gt;                
                    &lt;/div&gt;
               &lt;/fieldset&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>js CODE</strong></p>
  
  <pre>
      // AJAX Call handler using method="POST"
      function ajaxPostCallManip( str, url, toDoFunc )
      {   
          var xmlhttp;                // Request variable
          if( window.XMLHttpRequest )         // For modern browsers
          xmlhttp = new XMLHttpRequest;
          else                    // For old browsers
          xmlhttp = new ActiveXOBject("Microsoft.XMLHttp");
  
          xmlhttp.onreadystatechange=toDoFunc;
          xmlhttp.open("POST", url, true);
          xmlhttp.send(str);
      }
  
      function check_login()
      {
          // Construct the POST variables [username, password]
          var postStr = "username=" + $('#login_username').val() + "&" 
              + "password=" + $('#login_pwd').val();
  
          // Call the general purpose AJAX Handler Function
          ajaxPostCallManip(postStr, "login.php", function()  
          // toDoFunc to be performed when server response is ready
          {
          if( xmlhttp.readyState == 4 && xmlhttp.status == 200 )
          {   
              alert(xmlhttp.responseText);        
              switch(xmlhttp.responseText)
              {
                  case "1":
                  $('#login_err').css({'color':'green','display':'block'})
                                         .html('Successful Login');                   
                  break;
  
              case "2":
                      $('#login_err').css({'color':'red','display':'block'})
                                         .html('incorrect username/password')
                  break;
  
              case "3":
                  $('#login_err').css({'color':'red','display':'block'})
                                         .html('please fill in all fields')
                  break;
              }
          }
          });
      }
  </pre>
  
  <p><strong>PHP CODE</strong></p>
  
  <pre><code>&lt;?php
      include('dbManip.php');
  
      echo '&lt;script&gt; alert("Inside login.php"); &lt;/script&gt;';
  
      $username = $_POST['username'];
      $password = $_POST['password'];
  
      // Just to check that the POST variables arrived safely
      echo "&lt;script&gt; alert('username = ' + $username); &lt;/script&gt;";    
  
  
      if(!empty($username) &amp;&amp; !empty($password))
      {
          // Fetch data from database
          $query = "
              SELECT username,password
              FROM users
              WHERE username = '$username' and password = '$password';
          ";  
  
          // Execute query
          $res = mysql_query($query);
  
          // If there is a match for the credentials entered with the database
          if(mysql_num_rows($res) == 1)
          {
              // Fetch information and double check credentials
              while($row = mysql_fetch_assoc($res))
              {
                  $db_username = $row['username'];
                  $db_password = $row['password'];
              }
  
              // Compare results with user input
              if( $username == $db_username &amp;&amp; $password == $db_password)
              {
                  // Credentials are correct - response = 1
                  echo '1';
              }
              else 
              {
                  // Credentials are incorrect - response = 2
                  echo '2';
              }
          }
          else
          {
              // There is no match in the database
              // Credentials are incorrect - response = 2
              echo '2';
          }
      }   
      else 
      {
          // If one or both fields are empty - response = 3
          echo '3';
      }
  ?&gt;
  </code></pre>