jQuery提交表单两次

Posted 2023-02-24

【中文标题】jQuery提交表单两次

【英文标题】：jQuery Submitting form Twice

【发布时间】：2013-03-27 06:26:03

【问题描述】：

我知道这个问题已经被回答了几百次，但我已经尝试了很多潜在的解决方案，但它们似乎都不适用于我的实例。

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

希望有人能帮忙，因为它让我发疯。谢谢。

【问题讨论】：

尝试将其更改为 $("#makepayment_form").submit(function(event) event.preventDefault(); 保持提交按钮完好无损。

尝试更改上述内容，但效果相同

【参考方案1】：

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

示例代码：

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

【讨论】：

这行得通，但它似乎是一个警察......似乎在某个地方仍然可能有一些错误的代码，这只是在问题之上添加了一个修复，而不是修复问题。

工作得很好，谢谢！我不得不承认它在本地主机上只使用 $('form').submit() 就可以正常工作，但在服务器上它提交了两次表单。竖起大拇指！

【参考方案2】：

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

我会改变这个：

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

到这里：

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

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

【讨论】：

+1 "现在用户提交表单的方式并不重要..." :)

这仍然导致表单被提交两次:(

好吧，我正试图根据上面的代码示例弄清楚表单是如何提交两次的，但如果你正在执行 event.preventDefault() 并返回 false 应该没有问题.尝试在 event.preventDefault() 之后立即隐藏或禁用提交按钮，以防用户双击。然后，在成功的 ajax 发布之后，执行一些操作，例如将它们重定向到感谢页面。除此之外，尝试使用 Firebug 进行调试，看看发生了什么。

出于某种我不明白的原因，.keyup 函数不需要 event.preventDefault(); 行

【参考方案3】：

尝试添加以下行。

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

这对我有用。

【参考方案4】：

虽然所有列出的解决方案都是有效的，但就我而言，导致我提交多个表单的原因是我传递给提交时调用的函数。

我有

$('form').bind('submit', function(e)
  e.preventDefault()
  return false
)

但是我改成

$('form').bind('submit', function()
  event.preventDefault()
  return false;
)

这对我有用。不包括 return false 应该仍然不会阻止代码工作

【参考方案5】：

在您的点击函数下方，将preventDefault() 添加到事件中。

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

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

在点击函数末尾添加return false;也有帮助（见上文）。

【讨论】：

我也在想同样的事情。但是表单没有action 标签，所以如果它自己提交，它会发送到当前页面，而不是AJAX 脚本。并且点击函数确实以return false; 结尾（现在我已经重新格式化了它更容易看到）。

【参考方案6】：

当您使用 AJAX 请求向服务器发送数据时，甚至没有理由使用form 标记和<input type="submit" .../>（您可以使用简单的按钮）。我也认为 Cumbo 的回答应该有效。如果没有，你也可以试试event.stopPropagation()。

【参考方案7】：

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

然而@Cumbo、@Barmar 也都在正确的轨道上，除了让它工作

event.preventDefault();

需要放在脚本底部：

);
event.preventDefault();
return false;

感谢大家的帮助:)