title: Login Form for mobile application using Jquery Mobile, PHP and MySQL
body: <p>I am new with mobile development. I am trying to develop a Login Form that will check username and password with MySQL database. I built some code already. I have two problems. The first one is, after submitted the form, in the browser's URL bar, I can see the username and password typed, even using POST on my JQuery script. The second issue is that the page keeps going back to login.html instead going to main.html. Below is what I built, using my actual experience with PHP, JQuery and MySQL.</p>
  
  <p>HTML form</p>
  
  <pre><code>&lt;div id="loginPage" data-role="page"&gt;
  &lt;div data-role="header"&gt;
  &lt;h1&gt;App Authentication&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div data-role="content"&gt;   
      &lt;div id="landmark-1" data-landmark-id="1"&gt;
      &lt;form id="loginForm"&gt;
      &lt;div data-role="fieldcontain" class="ui-hide-label"&gt;
          &lt;label for="username"&gt;Username:&lt;/label&gt;
          &lt;input type="text" name="username" id="username" value="" placeholder="Username" /&gt;
      &lt;/div&gt;
  
      &lt;div data-role="fieldcontain" class="ui-hide-label"&gt;
          &lt;label for="password"&gt;Password:&lt;/label&gt;
          &lt;input type="password" name="password" id="password" value="" placeholder="Password" /&gt;
      &lt;/div&gt;
  
      &lt;input type="submit" value="Login" id="submitButton"&gt;
      &lt;/form&gt;
  &lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;div data-role="footer"&gt;
      &lt;h4&gt;&amp;copy; Silva's General Services&lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The auth.php</p>
  
  <pre><code>&lt;?php
  $mysqli = new mysqli($mysql_hostname,$mysql_user, $mysql_password, $mysql_database);
  
  header("access-control-allow-origin: *");
  header("access-control-allow-methods: GET, POST, OPTIONS");
  header("access-control-allow-credentials: true");
  header("access-control-allow-headers: Content-Type, *");
  header("Content-type: application/json");
  
  // Parse the log in form if the user has filled it out and pressed "Log In"
  if (isset($_POST["username"]) &amp;&amp; isset($_POST["password"])) {
  
        CRYPT_BLOWFISH or die ('No Blowfish found.');
  
        //This string tells crypt to use blowfish for 5 rounds.
        $Blowfish_Pre = '$2a$05$';
        $Blowfish_End = '$';
  
        $username = mysql_real_escape_string($_POST['username']);
        $password = mysql_real_escape_string($_POST['password']);
  
  
        $sql = "SELECT id, password, salt, username FROM users WHERE username='$username' LIMIT 1";
        $result = $mysqli-&gt;query($sql) or die( $mysqli-&gt;error() );
        $row = mysqli_fetch_assoc($result);
  
        $hashed_pass = crypt($password, $Blowfish_Pre . $row['salt'] . $Blowfish_End);
  
        if ($hashed_pass == $row['password']) {
            $response_array['status'] = 'success'; 
        } else {
            $response_array['status'] = 'error'; 
        }
  echo json_encode($response_array);
  
  }
  $mysqli-&gt;close();
  ?&gt;
  </code></pre>
  
  <p>Jquery Script</p>
  
  <pre><code>&lt;script&gt;
  $('#loginForm').submit(function(){
   e.preventDefault();
   jQuery.support.cors = true; 
   $.ajax({ 
       url: 'http://www.test.com/mobile/auth.php',
       crossDomain: true,
       type: 'post',
       data: $("#loginForm").serialize(), 
       success: function(data){
           if(data.status == 'success'){
               window.location.href = 'http://www.test.com/mobile/main.html'; 
           }else if(data.status == 'error'){
               alert("Authentication Invalid. Please try again!");
               return false;        
          }
  
       }
   }); 
  
   }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>I really appreciate any help.</p>
  
  <p>Thank you.</p>