修改

Question

我是PHP MYSQL JQUERY的新手，我有一个Jquery Mobile Form，我想将表单数据提交给mySql，然后更改为移动页面的#pageTwo。这看起来应该很容易，但我似乎无法弄明白。

<body>
<div data-role="page" id="pageone">
  <?php include 'connectDB.php' ?>
  <div data-role="header">
    <h1>Order Request Form</h1>
  </div>
<div data-role="main" class="ui-content">
 <div class="ui-field-contain">
    <form method="post" id="ACform" name="ACform">        
      <div>
      <label for="onSiteName" class="ui-hidden-accessible">On Site Contact:</label>
      <input type="text" name="onSiteName" id="onSiteName" data-clear-btn="true" placeholder="On Site Contact name..." required>
      </div>
      <div>
      <label for="onSiteNumber" class="ui-hidden-accessible">On Site Contact Number:</label>
      <input type="tel" name="onSiteNumber" id="onSiteNumber" data-clear-btn="true" placeholder="On Site Contact number..." required>
      </div>
      <div>
      <label for="adminContactName" class="ui-hidden-accessible">Administrator Contact:</label>
      <select name="adminContactDropDown" id="adminContactDropDown" required>
        <option value="">Admin Contact</option>
        <option value="foo">foo</option>
        <option value="bar">bar</option>
        <option value="Other">Other</option>
      </select>
          </div>
          <div>
          <input type="text" name="adminContactName" id="adminContactName" data-clear-btn="true" placeholder="Administrator Contact name..." required>
          <label for="adminContactNumber" class="ui-hidden-accessible">Administrator Contact Number:</label>
          <input type="tel" name="adminContactNumber" id="adminContactNumber" data-clear-btn="true" placeholder="Administrator Contact number..." required>
      </div>
<script>
     $('#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;
           }
        });
</script>
 <?php include 'submit.php' ?>
     <div>
      <input type="reset" name="reset" value="Reset" id="clear">
      <input type="submit" name="submit" value="Submit"><br/>
     </div>
        </form>
      </div>
  </div>

  <div data-role="footer">
    <h1><img src="logo.png" align="middle" width="160" height="26"/></h1>
  </div>
</div>  

<!--Page two-->
<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="header">
    <h1>A/C Order Request Sent!</h1>
  </div>

  <div data-role="main" class="ui-content">
       <?php echo $output; ?>
    <p>Thank you for submitting your order request. Your request will be reviewed by one of our sales representatives and you will be contacted shortly.</p>
    <div align="right"><a href="#pageone" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right">Place another order</a></div>
  </div>

  <div data-role="footer">
    <h1><img src="logo.png" align="middle" width="160" height="26"/></h1>
  </div>

</div> 
</body>
</html>

submit.php

    <?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->query($sql) === TRUE) {
$output .= "New record created successfully";
    } else {
        $output .= "Error: " . $sql . "<br>" . $conn->error;
    }

    ?>

我尝试删除了submitHandler，它正确地提交了表单，但它没有更改页面，并在重新加载时中断页面上的所有其他javascript（未显示）。但是当我有submitHandler时，页面会发生变化，但表单不会提交。

修改

根据Michaels的建议，我尝试了下面的代码，它给了我一个“错误加载页面”错误：

submitHandler: function (form) {
  $(':mobile-pagecontainer').pagecontainer('change', '#pagetwo', {
   reload: false
  });
 return false;
}
form.submit();
});

我也尝试过：

submitHandler: function (form) {
  $(':mobile-pagecontainer').pagecontainer('change', '#pagetwo', {
   reload: false
  });
 return false;
 form.submit();
}
});

带我到pageTwo但没有提交表格

Answer 1

使用submitHandler方法时，您需要提交表单。点击此处：http://jqueryvalidation.org/documentation/。

$("#myform").validate({
    submitHandler: function(form) {
        form.submit();
    }
});

修改

为了清楚起见，我删除了第一次修改。

编辑＃2

这是HTML：

<html>  <head> <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body>  <div data-role="page" id="pageone"> <div data-role="header"> <h1>Order Request Form</h1> </div> <div data-role="main" class="ui-content"> <div class="ui-field-contain"> <form method="post" id="ACform" name="ACform"> <div> <label for="onSiteName" class="ui-hidden-accessible">On Site Contact:</label> <input type="text" name="onSiteName" id="onSiteName" data-clear-btn="true" placeholder="On Site Contact name..." required> </div> <div> <label for="onSiteNumber" class="ui-hidden-accessible">On Site Contact Number:</label> <input type="tel" name="onSiteNumber" id="onSiteNumber" data-clear-btn="true" placeholder="On Site Contact number..." required> </div> <div> <label for="adminContactName" class="ui-hidden-accessible">Administrator Contact:</label> <select name="adminContactDropDown" id="adminContactDropDown" required> <option value="">Admin Contact</option> <option value="foo">foo</option> <option value="bar">bar</option> <option value="Other">Other</option> </select> </div> <div> <input type="text" name="adminContactName" id="adminContactName" data-clear-btn="true" placeholder="Administrator Contact name..." required> <label for="adminContactNumber" class="ui-hidden-accessible">Administrator Contact Number:</label> <input type="tel" name="adminContactNumber" id="adminContactNumber" data-clear-btn="true" placeholder="Administrator Contact number..." required> </div> <div> <input type="reset" name="reset" value="Reset" id="clear"> <input type="submit" name="submit" value="Submit"><br/> </div> </form> </div> </div> <div data-role="footer"> <h1> <img src="logo.png" align="middle" width="160" height="26"/> </h1> </div> </div>  <div data-role="page" data-dialog="true" id="pagetwo"> <div data-role="header"> <h1>A/C Order Request Sent!</h1> </div> <div data-role="main" class="ui-content"> <div id="dbOutput"></div>  <p>Thank you for submitting your order request. Your request will be reviewed by one of our sales representatives and you will be contacted shortly.</p> <div align="right"> <a href="#pageone" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right">Place another order</a> </div> </div> <div data-role="footer"> <h1> <img src="logo.png" align="middle" width="160" height="26"/> </h1> </div> </div> </body> </html>

JavaScript：

<script> $('#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) { var data = $(form).serialize(); $.ajax({ type: 'POST', url: 'submit.php', data: data, success: function (response, status){ console.log(response); //This should show the $output variable from submit.php $('#dbOutput').innerHTML(response); //This will input the response into the div#dbOutput $(':mobile-pagecontainer').pagecontainer('change', '#pagetwo'); //According to samples, this should be correct code... But again, I've never actually used pagecontainer } } }); } }); </script>

connectDB.php文件：

<?php $config = [ 'host' => 'localhost', 'username' => 'joe', 'password' => 'thisismypassword', 'dbname' => 'databasename' ]; $db = new PDO('mysql: host='.$config['host'].';dbname='.$config['dbname'],$config['username'],$config['password']; $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); $db->setAttrebute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

数据库表：

+--------------------+ | tbl_orders | +--------------------+ | id | | onSiteName | | onSiteNumber | | adminContactName | | adminContactNumber | +--------------------+

submit.php文件：

<?php include 'connectDB.php'; $jobName = $delDate = $delTimeFrom = $useDate = $startTime = $puDate = $puTimeFrom = $address = $address2 = $zip = $city = $state = $delArea = $onSiteName = $onSiteNumber = $adminContactName = $adminContactNumber = $ACtotal = ''; //Check to make sure the there are values and that they aren't false values before proceeding if (isset($_POST['onSiteName']) && !empty($_POST['onSiteName'])) { $onSiteName = test_input($_POST["onSiteName"]); $onSiteNumber = test_input($_POST["onSiteNumber"]); $adminContactName = test_input($_POST["adminContactName"]); $adminContactNumber = test_input($_POST["adminContactNumber"]); //Preparing the query to avoid SQL injection $sql = $db->prepare("INSERT INTO tbl_orders (onSiteName , onSiteNumber , adminContactName , adminContactNumber) VALUES (:onSiteName , :onSiteNumber , :adminContactName , :adminContactNumber)"; //Binding the parameters $sql_params = [ ':onSiteName' => $onSiteName, ':onSiteNumber' => $onSiteNumber, ':adminContactName' => $adminContactName, ':adminContactNumber' => $adminContactNumber ]; $output = ''; if ($sql->execute($sql_params) === TRUE) { $output .= "New record created successfully"; } else { $output .= "Error: " . $sql . "<br>" . $conn->error; } echo $output; } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlentities($data); //changed from htmlspecialchars to make sure most symbols are encoded properly for storage in DB return $data; } ?>

修改

我已更新答案以包含所有必要组件。此外，我不知道您是如何连接到您的数据库的，但我使用PDO连接到数据库，因此如果您使用其他内容，则需要调整代码。基本上，您将使用AJAX将表单发布到您的submit.php脚本，然后该脚本处理并尝试插入到数据库中。然后它echo是$output变量，AJAX会将其作为response捕获，并将其记录在您的控制台中，并在标题为#dbOutput的新div中进行更改。基本上，输出不会改变，因为PHP已经提供给页面，所以它已经完成了。使用AJAX将允许您在不重新加载页面的情况下动态更改包含DB结果的元素。由于有一些小的修正/编辑，你必须仔细梳理。希望有所帮助！

Jquery在php脚本运行之前验证更改页面

修改

1 个答案: