Come impedire che il modulo venga inviato più volte dal lato client?

A volte, quando la risposta è lenta, è possibile fare clic più volte sul pulsante di invio.

Come evitare che ciò accada?

Usa javascript discreto per disabilitare l'evento di invio sul modulo dopo che è già stato inviato. Ecco un esempio che utilizza jQuery.

EDIT: risolto il problema con l'invio di un modulo senza fare clic sul pulsante di invio. Grazie, ichiban.

$("body").on("submit", "form", function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

Ho provato la soluzione di Vanstee insieme alla convalida discreta di asp mvc 3 e se la convalida del client fallisce, il codice viene ancora eseguito e l'invio del modulo è disabilitato per sempre. Non riesco a inviare nuovamente dopo aver corretto i campi. (vedi il commento di bjan)

Quindi ho modificato lo script di vanstee in questo modo:

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});

Il controllo dell'invio del modulo lato client può essere ottenuto in modo abbastanza elegante facendo in modo che il gestore onsubmit nasconda il pulsante di invio e lo sostituisca con un'animazione di caricamento. In questo modo l'utente ottiene un feedback visivo immediato nello stesso punto in cui è avvenuta la sua azione (il clic). Allo stesso tempo si impedisce che il modulo venga inviato un'altra volta.

Se invii il modulo tramite XHR, tieni presente che devi anche gestire gli errori di invio, ad esempio un timeout. Dovresti visualizzare di nuovo il pulsante di invio perché l'utente deve farlo inviare nuovamente il modulo.

In un'altra nota, llimllib solleva un punto molto valido. La convalida di tutti i moduli deve avvenire lato server. Ciò include più controlli di invio. Non fidarti mai del cliente! Questo non è solo un caso se javascript è disabilitato. È necessario tenere presente che tutto il codice lato client può essere modificato. È un po 'difficile da immaginare, ma html / javascript che parla con il tuo server non è necessariamente l'html / javascript che hai scritto.

Come suggerisce llimllib, genera il modulo con un identificatore univoco per quel modulo e mettilo in un campo di input nascosto. Memorizza quell'identificatore. Quando si ricevono i dati del modulo, elaborarli solo quando l'identificatore corrisponde. (Collegando anche l'identificatore alla sessione degli utenti e abbinarlo, anche per una maggiore sicurezza.) Dopo l'elaborazione dei dati, eliminare l'identificatore.

Ovviamente, di tanto in tanto, avresti bisogno di ripulire gli identificatori per i quali non è mai stato inviato alcun dato del modulo. Ma molto probabilmente il tuo sito web utilizza già una sorta di meccanismo di "raccolta dei rifiuti".

<form onsubmit="if(submitted) return false; submitted = true; return true">

Ecco un modo semplice per farlo:

<form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
</script>

Disattiva il pulsante di invio subito dopo un clic. Assicurati di gestire correttamente le convalide. Mantieni anche una pagina intermedia per tutte le operazioni di elaborazione o DB e quindi reindirizza alla pagina successiva. Ciò assicura che l'aggiornamento della seconda pagina non esegua un'altra elaborazione.

Hash l'ora corrente, renderlo un input nascosto nel modulo. Sul lato server, controlla l'hash di ogni invio del modulo; se hai già ricevuto quell'hash, allora hai un nuovo invio.

modifica: affidarsi a javascript non è una buona idea, quindi tutti potete continuare a votare quelle idee, ma alcuni utenti non lo avranno abilitato. La risposta corretta è non fidarsi dell'input dell'utente sul lato server.

È inoltre possibile visualizzare una barra di avanzamento o una casella di selezione per indicare che il modulo è in fase di elaborazione.

Usando JQuery puoi fare:

$('input:submit').click( function() { this.disabled = true } );

&

   $('input:submit').keypress( function(e) {
     if (e.which == 13) {
        this.disabled = true 
     } 
    }
   );

So che hai taggato la tua domanda con "javascript", ma ecco una soluzione che non dipende affatto da javascript:

È un pattern di webapp denominato PRG , ed ecco un buon articolo che lo descrive

Puoi impedire più invii semplicemente con:

var Workin = false;

$('form').submit(function()
{
   if(Workin) return false;
   Workin =true;

   // codes here.
   // Once you finish turn the Workin variable into false 
   // to enable the submit event again
   Workin = false;

});

La risposta più semplice a questa domanda è: "A volte, quando la risposta è lenta, è possibile fare clic più volte sul pulsante di invio. Come evitare che ciò accada?"

Disabilita semplicemente il pulsante di invio del modulo, come sotto il codice.

<form ... onsubmit="buttonName.disabled=true; return true;">
  <input type="submit" name="buttonName" value="Submit">
</form>

Disattiverà il pulsante di invio, al primo clic per l'invio. Inoltre, se hai alcune regole di convalida, funzionerà bene. Spero che possa aiutare.

Sul lato client , dovresti disabilitare il pulsante di invio una volta che il modulo è stato inviato con codice javascript come il metodo fornito da @vanstee e @chaos.

Ma c'è un problema per il ritardo di rete o la situazione disabilitata da javascript in cui non dovresti fare affidamento sul JS per evitare che ciò accada.

Quindi, sul lato server , dovresti controllare l'invio ripetuto dagli stessi client e omettere quello ripetuto che sembra un falso tentativo da parte dell'utente.

Puoi provare il plugin jquery in forma sicura .

$('#example').safeform({
    timeout: 5000, // disable form on 5 sec. after submit
    submit: function(event) {
        // put here validation and ajax stuff...

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

La soluzione più semplice ed elegante per me:

function checkForm(form) // Submit button clicked
{
    form.myButton.disabled = true;
    form.myButton.value = "Please wait...";
    return true;
}

<form method="POST" action="..." onsubmit="return checkForm(this);">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Link per ulteriori informazioni ...

Usa questo codice nel tuo form.it gestirà più clic.

<script type="text/javascript">
    $(document).ready(function() {
        $("form").submit(function() {
            $(this).submit(function() {
                return false;
            });
            return true;
        });     
    }); 
</script>

funzionerà di sicuro.

Ciò consente l'invio ogni 2 secondi. In caso di convalida frontale.

$(document).ready(function() {
    $('form[debounce]').submit(function(e) {
        const submiting = !!$(this).data('submiting');

        if(!submiting) {
            $(this).data('submiting', true);

            setTimeout(() => {
                $(this).data('submiting', false);
            }, 2000);

            return true;
        }

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

il modo migliore per impedire l'invio di più file è semplicemente passare l'ID del pulsante nel metodo.

    function DisableButton() {
        document.getElementById("btnPostJob").disabled = true;
    }
    window.onbeforeunload = DisableButton; 

Fare questo usando javascript è un po 'facile. Di seguito è riportato il codice che darà la funzionalità desiderata:

$('#disable').on('click', function(){
    $('#disable').attr("disabled", true);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>

La soluzione più semplice è quella di disabilitare il pulsante al clic, abilitarlo al termine dell'operazione. Per verificare una soluzione simile su jsfiddle:

[click here][1]

E puoi trovare qualche altra soluzione su questa risposta .

Questo funziona molto bene per me. Invia la farm e disabilita il pulsante e dopo 2 sec attiva il pulsante.

<button id="submit" type="submit" onclick="submitLimit()">Yes</button>

function submitLimit() {
var btn = document.getElementById('submit')
setTimeout(function() {
    btn.setAttribute('disabled', 'disabled');
}, 1);

setTimeout(function() {
    btn.removeAttribute('disabled');
}, 2000);}

In ECMA6 Syntex

function submitLimit() {
submitBtn = document.getElementById('submit');

setTimeout(() => { submitBtn.setAttribute('disabled', 'disabled') }, 1);

setTimeout(() => { submitBtn.removeAttribute('disabled') }, 4000);}

Solo per aggiungere alle possibili risposte senza bypassare la convalida dell'input del browser

$( document ).ready(function() {
    $('.btn-submit').on('click', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});

Un'alternativa a quanto proposto prima è:

jQuery('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
});