title: Jquery Validate changing page before php script runs
body: <p>I am new to PHP MYSQL JQUERY and I have a Jquery Mobile Form that i want to submit the form data to mySql then change to #pageTwo of the mobile page. This seems like it should be easy to do but i cant seem to figure it out.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div data-role="page" id="pageone"&gt;
    &lt;?php include 'connectDB.php' ?&gt;
    &lt;div data-role="header"&gt;
      &lt;h1&gt;Order Request Form&lt;/h1&gt;
    &lt;/div&gt;
  &lt;div data-role="main" class="ui-content"&gt;
   &lt;div class="ui-field-contain"&gt;
      &lt;form method="post" id="ACform" name="ACform"&gt;        
        &lt;div&gt;
        &lt;label for="onSiteName" class="ui-hidden-accessible"&gt;On Site Contact:&lt;/label&gt;
        &lt;input type="text" name="onSiteName" id="onSiteName" data-clear-btn="true" placeholder="On Site Contact name..." required&gt;
        &lt;/div&gt;
        &lt;div&gt;
        &lt;label for="onSiteNumber" class="ui-hidden-accessible"&gt;On Site Contact Number:&lt;/label&gt;
        &lt;input type="tel" name="onSiteNumber" id="onSiteNumber" data-clear-btn="true" placeholder="On Site Contact number..." required&gt;
        &lt;/div&gt;
        &lt;div&gt;
        &lt;label for="adminContactName" class="ui-hidden-accessible"&gt;Administrator Contact:&lt;/label&gt;
        &lt;select name="adminContactDropDown" id="adminContactDropDown" required&gt;
          &lt;option value=""&gt;Admin Contact&lt;/option&gt;
          &lt;option value="foo"&gt;foo&lt;/option&gt;
          &lt;option value="bar"&gt;bar&lt;/option&gt;
          &lt;option value="Other"&gt;Other&lt;/option&gt;
        &lt;/select&gt;
            &lt;/div&gt;
            &lt;div&gt;
            &lt;input type="text" name="adminContactName" id="adminContactName" data-clear-btn="true" placeholder="Administrator Contact name..." required&gt;
            &lt;label for="adminContactNumber" class="ui-hidden-accessible"&gt;Administrator Contact Number:&lt;/label&gt;
            &lt;input type="tel" name="adminContactNumber" id="adminContactNumber" data-clear-btn="true" placeholder="Administrator Contact number..." required&gt;
        &lt;/div&gt;
  &lt;script&gt;
       $('#ACform').validate({
        messages: {
          onSiteName: {required: "Please enter the on-site contact name"},
          onSiteNumber: {required: "Please enter the on-site contacts number"},
          adminContactDropDown: {required: "Please select an admin contact"},
          adminContactName: {required: "Please enter an admin contact name"},
          adminContactNumber: {required: "Please enter an admin contact number"},
          },
          errorPlacement: function (error, element) {
              error.insertAfter($(element).parent());
          },
         submitHandler: function (form) {
            form.submit();
            ':mobile-pagecontainer'.pagecontainer('change', '#pagetwo',     {
             reload: false
                });
             return false;
             }
          });
  &lt;/script&gt;
   &lt;?php include 'submit.php' ?&gt;
       &lt;div&gt;
        &lt;input type="reset" name="reset" value="Reset" id="clear"&gt;
        &lt;input type="submit" name="submit" value="Submit"&gt;&lt;br/&gt;
       &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div data-role="footer"&gt;
      &lt;h1&gt;&lt;img src="logo.png" align="middle" width="160" height="26"/&gt;&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;  
  
  &lt;!--Page two--&gt;
  &lt;div data-role="page" data-dialog="true" id="pagetwo"&gt;
    &lt;div data-role="header"&gt;
      &lt;h1&gt;A/C Order Request Sent!&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;div data-role="main" class="ui-content"&gt;
         &lt;?php echo $output; ?&gt;
      &lt;p&gt;Thank you for submitting your order request. Your request will be reviewed by one of our sales representatives and you will be contacted shortly.&lt;/p&gt;
      &lt;div align="right"&gt;&lt;a href="#pageone" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right"&gt;Place another order&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div data-role="footer"&gt;
      &lt;h1&gt;&lt;img src="logo.png" align="middle" width="160" height="26"/&gt;&lt;/h1&gt;
    &lt;/div&gt;
  
  &lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>submit.php</p>
  
  <pre><code>    &lt;?php $jobName = $delDate = $delTimeFrom = $useDate = $startTime = $puDate = $puTimeFrom = $address = $address2 = $zip = $city = $state = $delArea = $onSiteName = $onSiteNumber = $adminContactName = $adminContactNumber = $ACtotal = ''; 
      if ($_POST) {
    $onSiteName = test_input($_POST["onSiteName"]);
    $onSiteNumber = test_input($_POST["onSiteNumber"]);
    $adminContactName = test_input($_POST["adminContactName"]);
    $adminContactNumber = test_input($_POST["adminContactNumber"]);
  
  
      $sql = "INSERT INTO tbl_orders (onSiteName , onSiteNumber , adminContactName , adminContactNumber)
      VALUES ('$onSiteName' , '$onSiteNumber' , '$adminContactName' , '$adminContactNumber')";}
  
      function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;}
  
         $output = '';
         if ($conn-&gt;query($sql) === TRUE) {
  $output .= "New record created successfully";
      } else {
          $output .= "Error: " . $sql . "&lt;br&gt;" . $conn-&gt;error;
      }
  
      ?&gt;
  </code></pre>
  
  <p>I have tried to remove the submitHandler, it submits the form properly but it doesnt change the page and disrupts all the other javascript on the page (not shown) when it reloads. But when i have the submitHandler in, the page changes but the form doesn't submit.</p>
  
  <h1>edit</h1>
  
  <p>Based on Michaels suggestion, i tried the below code which gave me an "error loading page" error:</p>
  
  <pre><code>submitHandler: function (form) {
    $(':mobile-pagecontainer').pagecontainer('change', '#pagetwo', {
     reload: false
    });
   return false;
  }
  form.submit();
  });
  </code></pre>
  
  <p>I also tried:</p>
  
  <pre><code>submitHandler: function (form) {
    $(':mobile-pagecontainer').pagecontainer('change', '#pagetwo', {
     reload: false
    });
   return false;
   form.submit();
  }
  });
  </code></pre>
  
  <p>which took me to pageTwo but did not submit the form</p>