我是PHP MYSQL JQUERY的新手,我有一個Jquery Mobile表單,我想將表單數據提交給mySql,然後切換到#pageTwo移動頁面。這似乎應該很容易做,但我似乎無法弄清楚。Jquery在php腳本運行之前驗證更改頁面
<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時,頁面會更改,但表單不會提交。
編輯
基於邁克爾的建議,我想下面的代碼,這給了我一個 「錯誤加載頁面」 錯誤:
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();
}
});
歷時我到第二頁但未提交表格
'form.submit();'建議不起作用嗎? – Michael