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

Ich weiß, dass Sie Ihre Frage mit "javascript" getaggt, aber hier ist eine Lösung, die nicht auf javascript überhaupt abhängt:

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

Answer 2

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

Es gibt jedoch ein Problem bei Netzwerkverzögerungen oder bei deaktiviertem Javascript, bei dem man sich nicht auf das JS verlassen sollte, um dies zu verhindern.

Also, auf der Server-Seite Sie sollten die wiederholten Übermittlungen von denselben Kunden überprüfen und die wiederholten Übermittlungen, bei denen es sich offenbar um einen Fehlversuch des Benutzers handelt, auslassen.

Answer 3

Sie können die Mehrfachübermittlung einfach 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;

});

Answer 4

Sie können versuchen Safeform Jquery-Plugin.

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

Answer 5

Für mich die einfachste und eleganteste Lösung:

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