Login Form for mobile application using Jquery Mobile, PHP and MySQL

Question

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.

HTML form

<div id="loginPage" data-role="page">
<div data-role="header">
<h1>App Authentication</h1>
</div>

<div data-role="content">   
    <div id="landmark-1" data-landmark-id="1">
    <form id="loginForm">
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" value="" placeholder="Username" />
    </div>

    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="password">Password:</label>
        <input type="password" name="password" id="password" value="" placeholder="Password" />
    </div>

    <input type="submit" value="Login" id="submitButton">
    </form>
</div>  
</div>

<div data-role="footer">
    <h4>&copy; Silva's General Services</h4>
</div>

The auth.php

<?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"]) && 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->query($sql) or die( $mysqli->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->close();
?>

Jquery Script

<script>
$('#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;        
        }

     }
 }); 

 }); 
</script>

I really appreciate any help.

Thank you.

BogdanM · Accepted Answer · 2013-10-07 16:17:08Z

1

This is simply a guess, but:

you have no method in your form declaration: <form action="your_action_url" method="post">.
it looks like your not passing the event in the function. I know the syntax looking like this: $('#loginForm').submit(function(e){ notice the "e" as function parameter
jquery has e.preventDefault and e.stopPropagation which are two separate things, see jquery event object. Some other handlers may be doing stuff. You can also use "return false;" instead of the two, depending on your use case.

I think 2. will fix your problem, you need to pass the event to the function.

answered Oct 7, 2013 at 16:17

BogdanM

6351 gold badge6 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexandre Araujo Over a year ago

Hi @BogdanM ! That was awesome. The little "e" is making the job. Thank you very much for the answer!

Collectives™ on Stack Overflow

Login Form for mobile application using Jquery Mobile, PHP and MySQL

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related