jQuery提交表单两次 [英] jQuery Submitting form Twice

问题描述

我知道这个问题已经被回答了几百次，但是我已经完成了一大堆潜在的解决方案，但是他们都没有在我的实例中工作。

I know this question has been answered a few hundred times, but I have run through a load of the potential solutons, but none of them seem to work in my instance.

以下是我提交表单的表单和代码。它引发了一个PHP脚本。现在我知道脚本本身并不是提交的原因，因为我手动尝试了表单，并且只提交一次。

Below is my form and code for submitting the form. It fires off to a PHP script. Now I know the script itself isn't the cause of the submit, as I've tried the form manually and it only submits once.

jQuery的第一部分代码涉及到打开一个灯箱并从下面的表中拉出值，我已经将它包括在案例中，无论出于什么原因这是一个潜在的问题。

The 1st part of the jQuery code relates to opening up a lightbox and pulling values from the table underneath, I have included it in case for whatever reason it is a potential problem.

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>

希望有人能帮助我，因为它让我疯狂。感谢。

Hope someone can help as its driving me crazy. Thanks.

推荐答案

有些时候，您不仅要防止处理事件的默认行为，还要防止执行任何下游事件处理程序链。
这可以通过调用 event.stopImmediatePropagation（） 以及 event.preventDefault（） code> 。

Some times you have to not only prevent the default behauviour for handling the event, but also to prevent executing any downstream chain of event handlers. This can be done by calling event.stopImmediatePropagation() in addition to event.preventDefault().

示例代码：

Example code:

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

这篇关于jQuery提交表单两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！