title: jQuery Mobile and PHP login system not working
body: <p>I'm trying to create a login system for my jQuery mobile app but it's not doing anything after the login button is clicked. Right now I'm not using a db connection.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link href="jquery.mobile-1.1.0/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="jquery.mobile-1.1.0/jquery.mobile.structure-1.1.0.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="jquery.mobile-1.1.0/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
      $('#loginform').submit(function(){
      $('#output').html('Connecting...');
      var postTo = 'http://www.hedonsoft.com/game/login.php';
      $.post(postTo,{userLbl: $('[name=username]').val(), passwordLbl: $('[name=password]').val()}, function (data){
          if(data.message){
              $('#output').html(data.message);    
          }else{
              $('#output').html("Could not connect"); 
          }
          }, 'json');
  
          return false;
      });
      }); 
  &lt;/script&gt;
  &lt;script src="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="custom.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div data-role="page" id="mc_main"&gt;
    &lt;div data-role="header" id="header"&gt;
      &lt;h1&gt;Main Menu&lt;/h1&gt;
    &lt;/div&gt;
  
  &lt;div data-role="content"&gt;
  &lt;div data-role="collapsible" id="logindiv"&gt;&lt;h2&gt;Login&lt;/h2&gt;
     &lt;form id="loginform" method="post"&gt;
   &lt;div data-role="fieldcontain"&gt;
        &lt;label for="user"&gt;Username:&lt;/label&gt;
        &lt;input type="text" name="user" id="user" value=""  /&gt;
      &lt;/div&gt;
      &lt;div data-role="fieldcontain"&gt;
        &lt;label for="pass"&gt;Password:&lt;/label&gt;
        &lt;input name="pass" type="password" id="pass" value=""&gt;
      &lt;/div&gt;
      &lt;input type="submit" value="Login" data-icon="check" data-theme="a"/&gt;
     &lt;/form&gt;
     &lt;div id="output"&gt;&lt;/div&gt;
         &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>login.php</p>
  
  <pre><code>&lt;?php
  if(isset($_POST['username'] and isset($_POST['password'])) {
  
   // do logic for logining in (usually query your db)
   if ($_POST['username'] == 'test' and $_POST['password'] == 'test') {
   $data['success'] = true;
   $data['message'] = 'Login succesful';
   } else {
   $data['success'] = false;
   $data['message'] = 'Login failed';
   }
   // return json
   echo json_encode($data);
  }
  ?&gt;
  </code></pre>
  
  <p>I get 'Connecting...' in #output but that's it.</p>