Wie kann man verhindern, dass ein Formular von der Client-Seite aus mehrfach gesendet wird?

Question

Wenn die Antwort langsam ist, kann es vorkommen, dass man mehrmals auf die Schaltfläche "Senden" klickt.

Wie kann man dies verhindern?

Answer 1

Verwenden Sie unauffälliges Javascript, um das Submit-Ereignis auf dem Formular zu deaktivieren, nachdem es bereits abgeschickt wurde. Hier ist ein Beispiel mit jQuery.

EDIT: Problem mit dem Absenden eines Formulars ohne Klick auf die Schaltfläche "Absenden" behoben. Danke, ichiban.

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

Answer 2

Ich habe versucht vanstee's Lösung zusammen mit asp mvc 3 unobtrusive Validierung, und wenn Client-Validierung fehlschlägt, wird Code noch ausgeführt, und Formular einreichen ist für gut deaktiviert. Ich bin nicht in der Lage, nach der Korrektur von Feldern erneut zu senden. (siehe bjan's Kommentar)

Also habe ich das Skript von vanstee wie folgt geändert:

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

Answer 3

Die clientseitige Steuerung der Formularübermittlung kann auf elegante Weise erreicht werden, indem der onsubmit-Handler die Übermittlungsschaltfläche ausblendet und sie durch eine Ladeanimation ersetzt. Auf diese Weise erhält der Benutzer eine sofortige visuelle Rückmeldung an der Stelle, an der er geklickt hat. Gleichzeitig verhindern Sie, dass das Formular ein weiteres Mal abgeschickt wird.

Wenn Sie das Formular per XHR übermitteln, sollten Sie bedenken, dass Sie auch Fehler bei der Übermittlung behandeln müssen, z. B. eine Zeitüberschreitung. Sie müssten die Schaltfläche "Senden" erneut anzeigen, da der Benutzer muss das Formular erneut einzureichen.

Andererseits hat llimllib einen sehr guten Punkt angesprochen. Alle Die Formularvalidierung muss serverseitig erfolgen. Dies umfasst mehrere Überprüfungen der Übermittlung. Vertrauen Sie niemals dem Kunden! Dies ist nicht nur der Fall, wenn Javascript deaktiviert ist. Sie müssen bedenken, dass der gesamte clientseitige Code geändert werden kann. Es ist schwer vorstellbar, aber das HTML/Javascript, das mit Ihrem Server kommuniziert, ist nicht unbedingt das HTML/Javascript, das Sie geschrieben haben.

Wie llimllib vorschlägt, generieren Sie das Formular mit einem eindeutigen Bezeichner für dieses Formular und fügen Sie ihn in ein verstecktes Eingabefeld ein. Speichern Sie diesen Bezeichner. Wenn Sie Formulardaten empfangen, verarbeiten Sie diese nur, wenn der Bezeichner übereinstimmt. (Verknüpfen Sie den Bezeichner auch mit der Sitzung des Benutzers und gleichen Sie auch diese ab, um zusätzliche Sicherheit zu gewährleisten). Nach der Datenverarbeitung löschen Sie den Bezeichner.

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

Answer 4

Hier ist ein einfacher Weg, das 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>

Answer 5

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