jQuery Submitting form Twice

Question

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.

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.

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 Code:

$(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;
    });
});

Here is the html form:

<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.

Solution 1

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();
});

Solution 2

Also, you're binding the action to the submit button 'click'. But, what if the user presses 'enter' while typing in a text field and triggers the default form action? Your function won't run.

I would change this:

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

to this:

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

Now it doesn't matter how the user submits the form, because you're going to capture it no matter what.

Solution 3

Try adding the following lines.

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

This worked for me.

Solution 4

while all the listed solutions are valid, in my case, what what causing my multiple form submission was the e i was passing to the function called on submit.

i had

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

but i changed it to

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

and this worked for me. not including the return false should still not stop the code from working though

View more solutions