jQuery的形式提交两次(jQuery Submitting form Twice)

我知道这个问题已经回答几百次，但我已经通过了潜在solutons的负荷运行，但他们都不在我的情况下工作。

下面是我的形式提交表单代码。 它触发关闭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>

希望有人能帮助其驾驶我疯狂。 谢谢。

Answer 1:

你有一定的时间，不仅防止默认behauviour处理事件，还要防止执行事件处理程序的任何下游链。 这可以通过调用来完成event.stopImmediatePropagation()除了event.preventDefault()

示例代码：

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

Answer 2:

此外，要绑定的动作提交按钮“点击”。 但是，如果有什么用户按下“确认”键的同时输入文本字段并触发默认形式的行动？ 您的功能将无法运行。

我会改变这样的：

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

为此：

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

现在不要紧用户如何提交表单，因为你要抓住它，不管是什么。

Answer 3:

尝试添加以下行。

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

这为我工作。

Answer 4:

下面您点击功能，添加preventDefault()的事件。

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

这可能会解决你的问题。 preventDeafult()从触发停止默认事件。 在这种情况下，当点击，然后再次触发，当您发送使用AJAX功能，它的形式被触发。

这也有助于增加return false; 在点击功能的端部（见上文）。

Answer 5:

当你正在使用AJAX请求，将数据发送到服务器，没有理由，甚至使用form标记和<input type="submit" .../>你可以用简单的按钮来代替）。 此外，我认为Cumbo的答案应该工作。 如果没有，你也可以尝试event.stopPropagation()

Answer 6:

我最终改变后的@建议的脚本user2247104可惜还是两次提交表单。

然而@Cumbo，@Barmar也是正确的轨道上，所不同的是得到它的工作

event.preventDefault();

需要的是放置在脚本的底部：

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

感谢所有提供的帮助:)

文章来源: jQuery Submitting form Twice