我知道这个问题已经被回答了几百次,但是我已经遇到了一大堆潜在的解决方案,但它们似乎都没有在我的实例中发挥作用。
以下是我提交表单的表单和代码。它会触发PHP脚本。现在我知道脚本本身不是提交的原因,因为我手动尝试了表单,它只提交一次。
jQuery代码的第一部分涉及打开一个灯箱并从下面的表中提取值,我已将其包含在内,以防无论出于何种原因这是一个潜在的问题。
jQuery代码:
$(document).ready(function(){
$('.form_error').hide();
$('a.launch-1').click(function() {
var launcher = $(this).attr('id'),
launcher = launcher.split('_');
launcher, launcher[1], $('td .'+launcher[1]);
$('.'+launcher[1]).each(function(){
var field = $(this).attr('data-name'),
fieldValue = $(this).html();
if(field === 'InvoiceID'){
$("#previouspaymentsload").load("functions/invoicing_payments_received.php?invoice="+fieldValue, null, function() {
$("#previouspaymentsloader").hide();
});
} else if(field === 'InvoiceNumber'){
$("#addinvoicenum").html(fieldValue);
}
$('#'+field).val(fieldValue);
});
});
$("#addpayment_submit").click(function(event) {
$('.form_error').hide();
var amount = $("input#amount").val();
if (amount == "") {
$("#amount_error").show();
$("input#amount").focus();
return false;
}
date = $("input#date").val();
if (date == "") {
$("#date_error").show();
$("input#date").focus();
return false;
}
credit = $("input#credit").val();
invoiceID = $("input#InvoiceID").val();
by = $("input#by").val();
dataString = 'amount='+ amount + '&date=' + date + '&credit=' + credit + '&InvoiceID=' + invoiceID + '&by=' + by;
$.ajax({
type: "POST",
url: "functions/invoicing_payments_make.php",
data: dataString,
success: function(result) {
if(result == 1){
$('#payment_window_message_success').fadeIn(300);
$('#payment_window_message_success').delay(5000).fadeOut(700);
return false;
} else {
$('#payment_window_message_error_mes').html(result);
$('#payment_window_message_error').fadeIn(300);
$('#payment_window_message_error').delay(5000).fadeOut(700);
return false;
}
},
error: function() {
$('#payment_window_message_error_mes').html("An error occured, form was not submitted");
$('#payment_window_message_error').fadeIn(300);
$('#payment_window_message_error').delay(5000).fadeOut(700);
}
});
return false;
});
});
这是html表单:
<div id="makepayment_form">
<form name="payment" id="payment" class="halfboxform">
<input type="hidden" name="InvoiceID" id="InvoiceID" />
<input type="hidden" name="by" id="by" value="<?php echo $userInfo_ID; ?>" />
<fieldset>
<label for="amount" class="label">Amount:</label>
<input type="text" id="amount" name="amount" value="0.00" />
<p class="form_error clearb red input" id="amount_error">This field is required.</p>
<label for="credit" class="label">Credit:</label>
<input type="text" id="credit" name="credit" />
<label for="amount" class="label">Date:</label>
<input type="text" id="date" name="date" />
<p class="form_error clearb red input" id="date_error">This field is required.</p>
</fieldset>
<input type="submit" class="submit" value="Add Payment" id="addpayment_submit">
</form>
</div>
希望有人可以提供帮助,因为它让我疯狂。感谢。
答案 0 :(得分:35)
有时,您不仅要阻止处理事件的默认行为,还要防止执行任何下游事件处理程序链。
除了event.stopImmediatePropagation()
之外,还可以通过调用event.preventDefault()
来完成此操作。
示例代码:
$("#addpayment_submit").on('submit', function(event) {
event.preventDefault();
event.stopImmediatePropagation();
});
答案 1 :(得分:6)
此外,您将操作绑定到提交按钮“click”。但是,如果用户在键入文本字段时按“输入”并触发默认表单操作,该怎么办?你的功能不会运行。
我会改变这个:
$("#addpayment_submit").click(function(event) {
event.preventDefault();
//code
}
到此:
$("#payment").bind('submit', function(event) {
event.preventDefault();
//code
}
现在用户提交表单 无关紧要,因为无论如何你都会捕获它。
答案 2 :(得分:1)
尝试添加以下行。
event.preventDefault();
event.stopImmediatePropagation();
这对我有用。
答案 3 :(得分:1)
虽然列出的所有解决方案都是有效的,但在我的情况下,导致我提交多个表单的原因是我传递给提交时调用的函数。
我有
$('form').bind('submit', function(e){
e.preventDefault()
return false
})
但是我改成
$('form').bind('submit', function(){
event.preventDefault()
return false;
})
这对我有用。不包括 return false 仍然不应该阻止代码工作
答案 4 :(得分:0)
在点击功能下方,为活动添加preventDefault()
。
$("#addpayment_submit").click(function(event) {
event.preventDefault();
// Code here
return false;
});
这可以解决您的问题。 preventDeafult()
停止触发默认事件。在这种情况下,单击时会触发表单,然后在使用ajax函数发送表单时再次触发。
在点击功能结束时添加return false;
也很有帮助(见上文)。
答案 5 :(得分:0)
当您使用AJAX请求将数据发送到服务器时,甚至没有理由使用form
标记和<input type="submit" .../>
(您可以使用简单的按钮代替)。另外我认为Cumbo的答案应该有效。如果不是,您也可以尝试event.stopPropagation()
。
答案 6 :(得分:0)
我最终根据@ user2247104的建议更改了脚本,遗憾的是表单仍然提交了两次。
然而@Cumbo,@ Barmar也在正确的轨道上,除了让它运作
event.preventDefault();
需要放在脚本的底部:
});
event.preventDefault();
return false;
感谢所有人的帮助:)