title: Jquery Mobile Login form submission
body: <p>My simple app contains two pages. <br>
  1.Login page <br>
  2.Page One (Displays if login is successful)</p>
  
  <p>Login form gets user input and verify the user by sending data to check.php page.</p>
  
  <p>login page and pageone page</p>
  
  <pre><code>    &lt;body&gt;
   &lt;div data-role="page" id="login" &gt;
    &lt;div data-role="header" data-position="fixed"&gt;
  
      &lt;h1&gt;Login&lt;/h1&gt;
  
    &lt;/div&gt;
  
    &lt;div data-role="main" class="ui-content"&gt;
  
      &lt;form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false"&gt;
                  &lt;fieldset&gt;
                      &lt;div data-role="fieldcontain"&gt;
                          &lt;label for="username"&gt;Enter your username:&lt;/label&gt;
                          &lt;input type="text" value="" name="username" id="username"/&gt;
                      &lt;/div&gt;                                  
                      &lt;div data-role="fieldcontain"&gt;                                      
                          &lt;label for="password"&gt;Enter your password:&lt;/label&gt;
                          &lt;input type="password" value="" name="password" id="password"/&gt; 
                      &lt;/div&gt;
                      &lt;input type="button" data-theme="b" name="submit" id="submit" value="Submit"&gt;
                  &lt;/fieldset&gt;
              &lt;/form&gt; 
  
  
  
    &lt;/div&gt;
  
    &lt;div data-role="footer"  data-position="fixed" &gt;
      &lt;h1&gt;IIL 2014&lt;/h1&gt;
      &lt;/div&gt;
       &lt;/div&gt; 
  
  
       &lt;div data-role="page" id="pageone"  class="my-page"&gt;
            &lt;div data-role="header" data-position="fixed"&gt;
                    &lt;a href="#" id="user" data role="button"&gt;&lt;/a&gt;
              &lt;h1&gt;Dashboard&lt;/h1&gt;
                &lt;a href="#" id="refreshdata" data role="button"&gt;Refresh&lt;/a&gt;
            &lt;/div&gt;
  
            &lt;div data-role="main" class="ui-content"&gt;
  
  
  
  
            &lt;/div&gt;
  
            &lt;div data-role="footer"  data-position="fixed" &gt;
              &lt;h1&gt;IIL 2014&lt;/h1&gt;
            &lt;/div&gt;
          &lt;/div&gt;      
  
  
        &lt;/body&gt;
  </code></pre>
  
  <p>java script function </p>
  
  <pre><code>&lt;script&gt;
      $(document).on('pagebeforeshow', '#login', function(){  
          $(document).on('click', '#submit', function() { // catch the form's submit event
          if($('#username').val().length &gt; 0 &amp;&amp; $('#password').val().length &gt; 0){
              // Send data to server through ajax call
              // action is functionality we want to call and outputJSON is our data
                  $.ajax({url: 'http://iilsfa.br0s.info/Dashboard/check.php',
                      data: {action : 'login', formData : $('#check-user').serialize()}, // Convert a form to a JSON string representation
                          type: 'post',                   
                      async: true,
                      beforeSend: function() {
                          // This callback function will trigger before data is sent
                          $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                      },
                      complete: function() {
                          // This callback function will trigger on data sent/received complete
                          $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                      },
                      success: function (result) {
                              resultObject.formSubmitionResult = result;
                                          $.mobile.changePage("#pageone");
                      },
                      error: function (request,error) {
                          // This callback function will trigger on unsuccessful action                
                          alert('Network error has occurred please try again!');
                      }
                  });                   
          } else {
              alert('Please fill all nececery fields');
          }           
             return false; // cancel original event to prevent form submitting
  
          });    
  
  });
  
  $(document).on('pagebeforeshow', '#pageone', function(){     
      $('#user').append('This is a result of form submition: ' + resultObject.formSubmitionResult);  
  });
  
  var resultObject = {
      formSubmitionResult : null  
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>check.php </p>
  
  <pre><code>&lt;?php
  
      echo "Username =xxxxxx ";
  ?&gt;
  </code></pre>
  
  <p>My problem is javascript function is not sending or receiving any any data from the server.When i enter values to 2 text boxes and click on submit button,nothing happens.Please help me to solve this. 
  here is the example which i following
  <a href="https://stackoverflow.com/questions/15205437/jquery-mobile-how-to-correctly-submit-form-data">jQuery Mobile: How to correctly submit form data</a></p>