jQuery提交表单两次

我知道这个问题已经被回答了几百次，但是我已经遇到了大量潜在的解决方案，但它们似乎都没有在我的实例中起作用。

以下是我提交表格的表格和代码。 它触发了一个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表单：

 
 
  <input type="hidden" name="by" id="by" value="" /> 
 Amount:  
This field is required.
 Credit:  Date:  
This field is required.
 
  
  

希望有人可以帮助，因为它让我发疯。 谢谢。

Answer 1

有时，您不仅要阻止处理事件的默认行为，还要防止执行任何下游事件处理程序链。 除了event.preventDefault()之外，还可以通过调用event.stopImmediatePropagation()来完成此操作。

示例代码：

 $("#addpayment_submit").on('submit', function(event) { event.preventDefault(); event.stopImmediatePropagation(); }); 

Answer 2

此外，您将操作绑定到提交按钮“单击”。 但是，如果用户在输入文本字段时按“输入”并触发默认表单操作，该怎么办？ 你的function不会运行。

我会改变这个：

 $("#addpayment_submit").click(function(event) { event.preventDefault(); //code } 

对此：

 $("#payment").bind('submit', function(event) { event.preventDefault(); //code } 

现在用户如何提交表单并不重要，因为无论如何你都会捕获它。

Answer 3

尝试添加以下行。

 event.preventDefault(); event.stopImmediatePropagation(); 

这对我有用。

Answer 4

在您的点击function下方，为事件添加preventDefault() 。

 $("#addpayment_submit").click(function(event) { event.preventDefault(); // Code here return false; }); 

这可以解决您的问题。 preventDeafult()停止触发默认事件。 在这种情况下，单击时会触发表单，然后在使用ajax函数发送表单时再次触发。

它还有助于添加return false; 在点击function结束时（见上文）。

Answer 5

当您使用AJAX请求将数据发送到服务器时，甚至没有理由使用form标记和 （您可以使用简单的按钮代替）。 我认为Cumbo的答案应该有效。 如果没有，您也可以尝试event.stopPropagation() 。

Answer 6

我最终根据@ user2247104的建议更改了脚本，遗憾的是表单仍然提交了两次。

然而@Cumbo，@ Barmar也在正确的轨道上，除了让它运作起来

event.preventDefault();

需要放在脚本的底部：

 }); event.preventDefault(); return false; 

感谢所有人的帮助:)