Ho un modulo che richiede un po 'di tempo per l'elaborazione del server. Devo assicurarmi che l'utente aspetti e non tenti di reinviare il modulo facendo nuovamente clic sul pulsante. Ho provato a utilizzare il seguente codice jQuery:

<script type="text/javascript">
$(document).ready(function() {
    $("form#my_form").submit(function() {
        $('input').attr('disabled', 'disabled');
        $('a').attr('disabled', 'disabled');
        return true;
    });
});
</script>

Quando provo questo in Firefox tutto viene disabilitato ma il modulo non viene inviato con nessuno dei dati POST che dovrebbe includere. Non riesco a utilizzare jQuery per inviare il modulo perché ho bisogno che il pulsante sia inviato con il modulo in quanto vi sono più pulsanti di invio e stabilisco quale è stato utilizzato da quale valore è incluso nel POST. Ho bisogno che il modulo sia inviato come di solito e devo disabilitare tutto subito dopo che ciò accade.

Grazie!

Aggiornamento nel 2018 : ho appena ricevuto alcuni punti per questa vecchia risposta e volevo solo aggiungere che la soluzione migliore sarebbe quella di rendere l'operazione idempotente in modo che gli invii duplicati siano innocui.

Ad esempio, se il modulo crea un ordine, inserire un ID univoco nel modulo. La prima volta che il server vede una richiesta di creazione dell'ordine con quell'id, dovrebbe crearla e rispondere "successo". I successivi invii dovrebbero anche rispondere al "successo" (nel caso in cui il cliente non ottenga la prima risposta) ma non dovrebbero cambiare nulla.

I duplicati devono essere rilevati tramite un controllo di unicità nel database per prevenire le condizioni di gara.

Penso che il tuo problema sia questa linea:

$('input').attr('disabled','disabled');

Stai disabilitando TUTTI gli input, compresi, immagino, quelli i cui dati dovrebbero essere inviati dal modulo.

Per disattivare solo il pulsante di invio (s), si potrebbe fare questo:

$('button[type=submit], input[type=submit]').prop('disabled',true);

Tuttavia, non credo che IE invierà il modulo se anche quei pulsanti sono disabilitati. Suggerirei un approccio diverso.

Un plugin jQuery per risolverlo

Abbiamo appena risolto questo problema con il seguente codice. Il trucco qui sta usando jQuery data()per contrassegnare il modulo come già inviato o meno. In questo modo, non dobbiamo pasticciare con i pulsanti di invio, il che fa impazzire IE.

// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function() {
  $(this).on('submit',function(e){
    var $form = $(this);

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
    }
  });

  // Keep chainability
  return this;
};

Usalo in questo modo:

$('form').preventDoubleSubmission();

Se ci sono moduli AJAX che dovrebbero essere autorizzati a inviare più volte per caricamento della pagina, puoi dare loro una classe che indica quello, quindi escluderli dal tuo selettore in questo modo:

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();

L'approccio alla tempistica è sbagliato: come fai a sapere quanto tempo interverrà sul browser del client?

Come farlo

$('form').submit(function(){
  $(this).find(':submit').attr('disabled','disabled');
});

Quando il modulo viene inviato disabiliterà tutti i pulsanti di invio all'interno.

Ricorda, in Firefox quando disabiliti un pulsante questo stato verrà ricordato quando torni nella storia. Per evitare che sia necessario abilitare i pulsanti al caricamento della pagina, ad esempio.

Penso che la risposta di Nathan Long sia la strada da percorrere. Per me, sto usando la convalida lato client, quindi ho appena aggiunto una condizione che il modulo sia valido.

EDIT : se questo non viene aggiunto, l'utente non sarà mai in grado di inviare il modulo se la convalida sul lato client rileva un errore.

        // jQuery plugin to prevent double submission of forms
        jQuery.fn.preventDoubleSubmission = function () {
            $(this).on('submit', function (e) {
                var $form = $(this);

                if ($form.data('submitted') === true) {
                    // Previously submitted - don't submit again
                    alert('Form already submitted. Please wait.');
                    e.preventDefault();
                } else {
                    // Mark it so that the next submit can be ignored
                    // ADDED requirement that form be valid
                    if($form.valid()) {
                        $form.data('submitted', true);
                    }
                }
            });

            // Keep chainability
            return this;
        };

event.timeStampnon funziona in Firefox. Restituire false non è standard, è necessario chiamare event.preventDefault(). E mentre ci siamo, usa sempre le parentesi graffe con un costrutto di controllo .

Per riassumere tutte le risposte precedenti, ecco un plugin che fa il lavoro e funziona su più browser.

jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    jQuery(this).bind('submit', function(event) {

        if(last_clicked) {
            time_since_clicked = jQuery.now() - last_clicked;
        }

        last_clicked = jQuery.now();

        if(time_since_clicked < 2000) {
            // Blocking form submit because it was too soon after the last submit.
            event.preventDefault();
        }

        return true;
    });
};

Per affrontare Kern3l, il metodo di cronometraggio funziona per me semplicemente perché stiamo cercando di interrompere un doppio clic sul pulsante di invio. Se hai un tempo di risposta molto lungo a un invio, ti consiglio di sostituire il pulsante di invio o il modulo con uno spinner.

Il blocco completo degli invii successivi del modulo, come la maggior parte degli esempi precedenti, ha un effetto collaterale negativo: se si verifica un errore di rete e desiderano provare a inviare nuovamente, non sarebbero in grado di farlo e perderebbero le modifiche che fatto. Ciò renderebbe sicuramente un utente arrabbiato.

Per favore, controlla il plugin jquery-safeform .

Esempio di utilizzo:

$('.safeform').safeform({
    timeout: 5000,  // disable next submission for 5 sec
    submit: function() {
        // You can put validation and ajax stuff here...

        // When done no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
});

... ma il modulo non viene inviato con nessuno dei dati POST che dovrebbe includere.

Corretta. I nomi / i valori degli elementi del modulo disabilitati non verranno inviati al server. Dovresti impostarli come elementi di sola lettura .

Inoltre, le ancore non possono essere disabilitate in questo modo. Dovrai rimuovere i loro HREF (non consigliati) o impedire il loro comportamento predefinito (modo migliore), ad esempio:

<script type="text/javascript">
$(document).ready(function(){
    $("form#my_form").submit(function(){
      $('input').attr('readonly', true);
      $('input[type=submit]').attr("disabled", "disabled");
      $('a').unbind("click").click(function(e) {
          e.preventDefault();
          // or return false;
      });
    });
</script>

C'è la possibilità di migliorare l' approccio di Nathan Long . È possibile sostituire la logica per il rilevamento del modulo già inviato con questo:

var lastTime = $(this).data("lastSubmitTime");
if (lastTime && typeof lastTime === "object") {
    var now = new Date();
    if ((now - lastTime) > 2000) // 2000ms
        return true;
    else
        return false;
}
$(this).data("lastSubmitTime", new Date());
return true; // or do an ajax call or smth else

Il codice di Nathan ma per il plugin jQuery Validate

Se ti capita di usare il plugin jQuery Validate, hanno già implementato il gestore di invio e in quel caso non c'è motivo di implementarne più di uno. Il codice:

jQuery.validator.setDefaults({
  submitHandler: function(form){
    // Prevent double submit
    if($(form).data('submitted')===true){
      // Previously submitted - don't submit again
      return false;
    } else {
      // Mark form as 'submitted' so that the next submit can be ignored
      $(form).data('submitted', true);
      return true;
    }
  }
});

Puoi facilmente espanderlo all'interno del } else {blocco per disabilitare input e / o pulsante di invio.

Saluti

Ho finito per usare le idee di questo post per trovare una soluzione che è abbastanza simile alla versione di AtZako.

 jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    $(this).bind('submit', function(event){

    if(last_clicked) 
      time_since_clicked = event.timeStamp - last_clicked;

    last_clicked = event.timeStamp;

    if(time_since_clicked < 2000)
      return false;

    return true;
  });   
};

Usando così:

$('#my-form').preventDoubleSubmission();

Ho scoperto che le soluzioni che non includevano un qualche tipo di timeout ma solo l'invio disabilitato o gli elementi del modulo disabilitati hanno causato problemi perché una volta attivato il blocco non è possibile inviare nuovamente fino a quando non si aggiorna la pagina. Ciò causa alcuni problemi per me quando faccio cose ajax.

Questo può probabilmente essere un po 'più bello perché non è così elegante.

Se si utilizza AJAX per inviare un modulo, set async: falsedovrebbe impedire ulteriori invii prima che il modulo venga cancellato:

$("#form").submit(function(){
    var one = $("#one").val();
    var two = $("#two").val();
    $.ajax({
      type: "POST",
      async: false,  // <------ Will complete submit before allowing further action
      url: "process.php",
      data: "one="+one+"&two="+two+"&add=true",
      success: function(result){
        console.log(result);
        // do something with result
      },
      error: function(){alert('Error!')}
    });
    return false;
   }
});

Modificata la soluzione di Nathan un po 'per Bootstrap 3. Questo imposterà un testo di caricamento sul pulsante di invio. Inoltre, scadrà dopo 30 secondi e consentirà di inviare nuovamente il modulo.

jQuery.fn.preventDoubleSubmission = function() {
  $('input[type="submit"]').data('loading-text', 'Loading...');

  $(this).on('submit',function(e){
    var $form = $(this);

    $('input[type="submit"]', $form).button('loading');

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
      $form.setFormTimeout();
    }
  });

  // Keep chainability
  return this;
};

jQuery.fn.setFormTimeout = function() {
  var $form = $(this);
  setTimeout(function() {
    $('input[type="submit"]', $form).button('reset');
    alert('Form failed to submit within 30 seconds');
  }, 30000);
};

Usa due pulsanti di invio.

<input id="sub" name="sub" type="submit" value="OK, Save">
<input id="sub2" name="sub2" type="submit" value="Hidden Submit" style="display:none">

E jQuery:

$("#sub").click(function(){
  $(this).val("Please wait..");
  $(this).attr("disabled","disabled");
  $("#sub2").click();
});

Usa un semplice contatore al momento dell'invio.

    var submitCounter = 0;
    function monitor() {
        submitCounter++;
        if (submitCounter < 2) {
            console.log('Submitted. Attempt: ' + submitCounter);
            return true;
        }
        console.log('Not Submitted. Attempt: ' + submitCounter);
        return false;
    }

E chiama la monitor()funzione su invia il modulo.

    <form action="/someAction.go" onsubmit="return monitor();" method="POST">
        ....
        <input type="submit" value="Save Data">
    </form>

Ho riscontrato problemi simili e le mie soluzioni sono le seguenti.

Se non disponi di alcuna convalida lato client, puoi semplicemente utilizzare il metodo jquery one () come documentato qui.

http://api.jquery.com/one/

Questo disabilita il gestore dopo che è stato invocato.

$("#mysavebuttonid").on("click", function () {
  $('form').submit();
});

Se stai eseguendo la convalida lato client come stavo facendo, è leggermente più complicato. L'esempio precedente non ti consente di inviare nuovamente dopo la convalida non riuscita. Prova invece questo approccio

$("#mysavebuttonid").on("click", function (event) {
  $('form').submit();
  if (boolFormPassedClientSideValidation) {
        //form has passed client side validation and is going to be saved
        //now disable this button from future presses
        $(this).off(event);
   }
});

È possibile interrompere il secondo invio da questo

$("form").submit(function() {
        // submit more than once return false
        $(this).submit(function() {
            return false;
        });
        // submit once return true
        return true; // or do what you want to do
    });
});

La mia soluzione:

// jQuery plugin to prevent double submission of forms
$.fn.preventDoubleSubmission = function () {
    var $form = $(this);

    $form.find('[type="submit"]').click(function () {
        $(this).prop('disabled', true);
        $form.submit();
    });

    // Keep chainability
    return this;
};

Nel mio caso, onsubmit del modulo aveva un codice di convalida, quindi ho incrementato la risposta di Nathan Long includendo un checkpoint di onsubmit

$.fn.preventDoubleSubmission = function() {
      $(this).on('submit',function(e){
        var $form = $(this);
        //if the form has something in onsubmit
        var submitCode = $form.attr('onsubmit');
        if(submitCode != undefined && submitCode != ''){
            var submitFunction = new Function (submitCode);
            if(!submitFunction()){
                event.preventDefault();
                return false;
            }                   
        }

        if ($form.data('submitted') === true) {
            /*Previously submitted - don't submit again */
            e.preventDefault();
        } else {
          /*Mark it so that the next submit can be ignored*/
          $form.data('submitted', true);
        }
      });

      /*Keep chainability*/
      return this;
    };

Cambia pulsante di invio:

<input id="submitButtonId" type="submit" value="Delete" />

Con il pulsante normale:

<input id="submitButtonId" type="button" value="Delete" />

Quindi utilizzare la funzione clic:

$("#submitButtonId").click(function () {
        $('#submitButtonId').prop('disabled', true);
        $('#myForm').submit();
    });

E ricorda il pulsante di riattivazione quando è necessario:

$('#submitButtonId').prop('disabled', false);

Non posso credere al buon vecchio trucco CSS degli eventi puntatore: nessuno non è stato ancora menzionato. Ho avuto lo stesso problema aggiungendo un attributo disabilitato ma questo non viene postato. Prova quanto segue e sostituisci #SubmitButton con l'ID del pulsante di invio.

$(document).on('click', '#SubmitButton', function () {
    $(this).css('pointer-events', 'none');
})

Perché non solo questo: questo invierà il modulo ma disabiliterà anche il pulsante di invio,

   $('#myForm').on('submit', function(e) {
       var clickedSubmit = $(this).find('input[type=submit]:focus');
       $(clickedSubmit).prop('disabled', true);
   });

Inoltre, se stai usando jQuery Validate, puoi mettere queste due righe sotto if ($('#myForm').valid()).

questo codice visualizzerà il caricamento sull'etichetta del pulsante e imposterà il pulsante su

disabilitare lo stato, quindi dopo l'elaborazione, riattivare e ripristinare il testo del pulsante originale **

$(function () {

    $(".btn-Loading").each(function (idx, elm) {
        $(elm).click(function () {
            //do processing
            if ($(".input-validation-error").length > 0)
                return;
            $(this).attr("label", $(this).text()).text("loading ....");
            $(this).delay(1000).animate({ disabled: true }, 1000, function () {
                //original event call
                $.when($(elm).delay(1000).one("click")).done(function () {
                    $(this).animate({ disabled: false }, 1000, function () {
                        $(this).text($(this).attr("label"));
                    })
                });
                //processing finalized
            });
        });
    });
    // and fire it after definition
});

Ho risolto un problema molto simile usando:

$("#my_form").submit(function(){
    $('input[type=submit]').click(function(event){
        event.preventDefault();
    });
});