我在尝试使用ajax提交表单时阻止默认操作,但我相信我的代码有错误,因为页面似乎执行'刷新'并且表单清除但没有任何内容发送到数据库。我尝试在表单的“action”部分添加到php处理脚本的链接,它确实提交给数据库,所以问题似乎与我的jQuery代码有关。
<script type="text/javascript">
$(document).ready(function(e){
e.preventDefault();
$("#rpack_add_form").validate({
submitHandler: function(form) {
// do other stuff for a valid form
$.post('<?php echo BASE_URL?>/core/addrpack.php.php', $("#rpack_add_form").serialize(), function(data) {
$('#ajaxResult').html(data);
});
}
});
});
</script>
我的表单代码:
<div id="rpacks_admin" style="display: none;">
<h5>Add A New Recovery Pack</h5>
<form id="rpack_add_form" class='small_form' name='rpack_add_form' action='' method='post'>
Contract:
<select id="contract_select" name="contract" onchange="showContract(this)">
<option value='0'>Select Contract</option>
<?php
$sth = $conn->query("SELECT * FROM `contracts`");
while($row = $sth->fetch(PDO::FETCH_ASSOC))
{
echo '<option value='.$row['contracts_id'].'>'.$row['contracts_name'].'</option>';
}
?>
</select>
<div id="contract1" class="admin_box">
Prefix: <input name='prefix' type='text' id='prefix'><br />
Number: <input name='number' type='text' id='number'><br />
Suffix: <input name='suffix' type='text' id='suffix'><br />
</div>
<div id="contract2" class="admin_box">
<p>Sapce for content</p>
</div>
<div id="contract3" class="admin_box">
<p>Sapce for contentrm</p>
</div>
Received:
<select id="select_receive" name="received" onchange="showLocation(this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select><br />
<div id="location_box" style="display: none; padding-top: 5px;">Location: <input name='location' type='text' id='location'></div>
<input class='button' type=submit value='Add' name='add_rpack'>
</form>
<a class='hide_div' href='javascript:void(0);' onclick='hideRdiscDiv()'>Close</a>
和我的PHP,如果需要的话
<?php
session_start();
include_once 'config.php';
include_once 'connect.php';
include_once 'bcrypt.php';
$prefix = $_POST['prefix'];
$number = $_POST['number'];
$suffix = $_POST['suffix'];
$contract = $_POST['contract'];
$received = $_POST['received'];
$location = $_POST['location'];
//Check if password and username has been submitted then add to DB
if (empty ($number))
{
echo "You need to enter a recovery pack number";
}else
{
$sth = "INSERT INTO `rpacks` (rpacks_prefix, rpacks_number, rpacks_suffix, rpacks_contract, rpacks_receive, rpacks_location) VALUES (:prefix, :number, :suffix, :contract, :received, :location)";
$q = $conn->prepare($sth);
$q->execute(array(':prefix'=>$prefix,':number'=>$number,':suffix'=>$suffix,':contract'=>$contract, ':received'=>$received, ':location'=>$location));
echo "Added";
}
答案 0 :(得分:5)
.validate()
对象具有sendForm
参数。默认设置为true
,但您需要将其设置为false
,如下面的代码所示,以防止提交表单:
$(document).ready(function () {
$('#rpack_add_form').validate({
submitHandler: function (form) {
// do other stuff for a valid form
$.post('<?php echo BASE_URL?>/core/addrpack.php.php', $('#rpack_add_form').serialize(), function (data) {
$('#ajaxResult').html(data);
});
},
sendForm: false
});
});
您可以reference the docs了解更多信息。