jQuery Invio modulo Due volte

Question

So che a questa domanda è stata data risposta alcune centinaia di volte, ma ho attraversato un carico dei potenziali solutoni, ma nessuno di essi sembra funzionare nel mio caso.

Qui di seguito è la mia forma e il codice per inviare il modulo. Spara a uno script PHP. Ora so che lo script non è la causa del presentare, come ho cercato la forma manualmente Essa sostiene solo una volta.

La prima parte del codice jQuery si riferisce all'apertura di un lightbox e alla trazione dei valori dalla tabella sottostante, che ho incluso per qualsiasi motivo sia un potenziale problema.

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

Ecco il modulo 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> 

La speranza che qualcuno possa aiutare la sua guida pazzesco. Grazie.

Answer 1

Sotto la funzione click, aggiungere un preventDefault() all'evento.

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

Questo potrebbe risolvere il tuo problema. preventDeafult() interrompe l'attivazione dell'evento predefinito. In questo caso, il modulo è innescare una volta selezionato, quindi innescando ancora una volta quando si invia utilizzando la funzione ajax.

aiuta anche aggiungere return false; al termine della funzione click (vedi sopra).

Answer 2

Poiché si sta utilizzando la richiesta AJAX per inviare dati al server, non c'è motivo di utilizzare anche il tag form e <input type="submit" .../> (è possibile utilizzare invece il pulsante semplice). Inoltre penso che la risposta di Cumbo dovrebbe funzionare. Se non lo fa si può anche provare event.stopPropagation().

Answer 3

Inoltre, vincola l'azione al pulsante di invio "fai clic". Ma cosa succede se l'utente preme "entra" mentre digita in un campo di testo e attiva l'azione modulo predefinita? La tua funzione non funzionerà.

vorrei cambiare questo:

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

a questo:

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

Ora non importa come l'utente invia il modulo, perché si sta andando a catturarlo senza importa cosa

Answer 4

Ho finito per modificare lo script in base alle raccomandazioni di @ user2247104 sfortunatamente il modulo è ancora inviato due volte.

Tuttavia @Cumbo, @Barmar erano anche sulla strada giusta, se non che per farlo funzionare

event.preventDefault();

necessarie per essere posto sul fondo dello script:

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

Grazie a tutti per il loro aiuto :)

Answer 5

Alcune volte è necessario non solo impedire il comportamento predefinito per la gestione dell'evento, ma anche per prevenire exec uting qualsiasi catena a valle di gestori di eventi. Questo può essere fatto chiamando event.stopImmediatePropagation() oltre a event.preventDefault().

codice Esempio:

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

Answer 6

Prova ad aggiungere le seguenti linee.

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

Questo ha funzionato per me.