Wie kann verhindert werden, dass Formulare mehrmals vom Client gesendet werden?

Manchmal, wenn die Antwort langsam ist, kann man mehrmals auf die Schaltfläche "Senden" klicken.

Wie kann dies verhindert werden?

Verwenden Sie unauffälliges Javascript, um das Übermittlungsereignis im Formular zu deaktivieren, nachdem es bereits übermittelt wurde. Hier ist ein Beispiel mit jQuery.

BEARBEITEN: Problem beim Senden eines Formulars ohne Klicken auf die Schaltfläche "Senden" behoben. Danke, ichiban.

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

Ich habe die Lösung von vanstee zusammen mit der unauffälligen Validierung von asp mvc 3 ausprobiert. Wenn die Client-Validierung fehlschlägt, wird der Code weiterhin ausgeführt und das Senden von Formularen ist endgültig deaktiviert. Ich kann nach Korrektur der Felder nicht erneut einreichen. (siehe Kommentar von bjan)

Also habe ich Vanstees Skript folgendermaßen geändert:

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

Die clientseitige Kontrolle der Formularübermittlung kann sehr elegant erreicht werden, indem der Onsubmit-Handler die Übermittlungsschaltfläche ausblendet und durch eine Ladeanimation ersetzt. Auf diese Weise erhält der Benutzer sofort visuelles Feedback an derselben Stelle, an der seine Aktion (das Klicken) stattgefunden hat. Gleichzeitig verhindern Sie, dass das Formular ein anderes Mal gesendet wird.

Wenn Sie das Formular über XHR senden, beachten Sie, dass Sie auch Übermittlungsfehler behandeln müssen, z. B. eine Zeitüberschreitung. Sie müssten die Schaltfläche "Senden" erneut anzeigen, da der Benutzer das Formular erneut senden muss .

In einem anderen Punkt bringt llimllib einen sehr gültigen Punkt vor. Alle Formularüberprüfungen müssen serverseitig erfolgen. Dies beinhaltet mehrere Übermittlungsprüfungen. Vertraue niemals dem Kunden! Dies ist nicht nur dann der Fall, wenn Javascript deaktiviert ist. Sie müssen berücksichtigen, dass der gesamte clientseitige Code geändert werden kann. Es ist schwer vorstellbar, aber das mit Ihrem Server sprechende HTML / Javascript ist nicht unbedingt das von Ihnen geschriebene HTML / Javascript.

Generieren Sie das Formular, wie von llimllib vorgeschlagen, mit einem für dieses Formular eindeutigen Bezeichner und fügen Sie es in ein verstecktes Eingabefeld ein. Speichern Sie diese Kennung. Beim Empfang von Formulardaten werden diese nur verarbeitet, wenn die Kennung übereinstimmt. (Verknüpfen Sie den Bezeichner auch mit der Benutzersitzung und stimmen Sie ihn aus Sicherheitsgründen ebenfalls ab.) Löschen Sie den Bezeichner nach der Datenverarbeitung.

Natürlich müssen Sie von Zeit zu Zeit die Kennungen bereinigen, für die nie Formulardaten übermittelt wurden. Aber höchstwahrscheinlich verwendet Ihre Website bereits eine Art "Garbage Collection" -Mechanismus.

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

Hier ist eine einfache Möglichkeit, dies zu tun:

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

Deaktivieren Sie die Senden-Schaltfläche kurz nach einem Klick. Stellen Sie sicher, dass Sie die Validierungen ordnungsgemäß durchführen. Behalten Sie außerdem eine Zwischenseite für alle Verarbeitungs- oder DB-Vorgänge bei und leiten Sie dann zur nächsten Seite weiter. Dadurch wird sichergestellt, dass beim Aktualisieren der zweiten Seite keine weitere Verarbeitung durchgeführt wird.

Hash die aktuelle Zeit, mache es zu einer versteckten Eingabe im Formular. Überprüfen Sie auf der Serverseite den Hash jeder Formularübermittlung. Wenn Sie diesen Hash bereits erhalten haben, erhalten Sie eine wiederholte Übermittlung.

Bearbeiten: Sich auf Javascript zu verlassen ist keine gute Idee, daher können Sie alle diese Ideen weiter abstimmen, aber einige Benutzer haben sie nicht aktiviert. Die richtige Antwort ist, Benutzereingaben auf der Serverseite nicht zu vertrauen.

Sie können auch einen Fortschrittsbalken oder einen Drehfeld anzeigen, um anzuzeigen, dass das Formular verarbeitet wird.

Mit JQuery können Sie Folgendes tun:

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

&

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

Ich weiß, dass Sie Ihre Frage mit "Javascript" markiert haben, aber hier ist eine Lösung, die überhaupt nicht von Javascript abhängt:

Es ist ein Webapp-Muster namens PRG , und hier ist ein guter Artikel , der es beschreibt

Sie können das mehrfache Senden einfach verhindern mit:

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;

});

Die einfachste Antwort auf diese Frage lautet: "Manchmal, wenn die Antwort langsam ist, kann man mehrmals auf die Schaltfläche" Senden "klicken. Wie kann dies verhindert werden?"

Deaktivieren Sie einfach die Schaltfläche zum Senden von Formularen, wie im folgenden Code angegeben.

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

Die Schaltfläche "Senden" wird beim ersten Klicken zum Senden deaktiviert. Auch wenn Sie einige Validierungsregeln haben, funktioniert dies einwandfrei. Hoffe es wird helfen.

Auf der Clientseite sollten Sie die Schaltfläche "Senden" deaktivieren, sobald das Formular mit Javascript-Code wie der von @vanstee und @chaos bereitgestellten Methode gesendet wurde.

Es gibt jedoch ein Problem mit Netzwerkverzögerungen oder Situationen mit deaktiviertem Javascript, in denen Sie sich nicht auf JS verlassen sollten, um dies zu verhindern.

Also, auf der Server-Seite , sollten Sie die wiederholte Einreichung von den gleichen Kunden überprüfen und lassen die man wiederholt , die einen falschen Versuch , von dem Benutzer scheint.

Sie können das Safeform JQuery Plugin ausprobieren.

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

Die einfachste und eleganteste Lösung für mich:

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 für mehr ...

Verwenden Sie diesen Code in Ihrem Formular. Es werden mehrere Klicks verarbeitet.

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

es wird sicher funktionieren.

Dies ermöglicht das Senden alle 2 Sekunden. Im Falle einer Frontvalidierung.

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

Der beste Weg, um die Übermittlung mehrerer zu verhindern, besteht darin, einfach die Schaltflächen-ID in der Methode zu übergeben.

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

Dies mit Javascript zu tun ist etwas einfach. Es folgt der Code, der die gewünschte Funktionalität bietet:

$('#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>

Die einfachste Lösung besteht darin, die Schaltfläche beim Klicken zu deaktivieren und nach Abschluss des Vorgangs zu aktivieren. So überprüfen Sie eine ähnliche Lösung auf jsfiddle:

[click here][1]

Und Sie können eine andere Lösung für diese Antwort finden .

Das funktioniert sehr gut für mich. Es sendet die Farm und macht die Schaltfläche deaktiviert und nach 2 Sekunden aktiv die Schaltfläche.

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

Nur um die möglichen Antworten zu ergänzen, ohne die Validierung der Browsereingaben zu umgehen

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

Eine Alternative zu dem, was zuvor vorgeschlagen wurde, ist:

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