Ich habe ein Formular, dessen Verarbeitung einige Zeit in Anspruch nimmt. Ich muss sicherstellen, dass der Benutzer wartet und nicht versucht, das Formular erneut zu senden, indem er erneut auf die Schaltfläche klickt. Ich habe versucht, den folgenden jQuery-Code zu verwenden:
<script type="text/javascript">
$(document).ready(function() {
$("form#my_form").submit(function() {
$('input').attr('disabled', 'disabled');
$('a').attr('disabled', 'disabled');
return true;
});
});
</script>
Wenn ich dies in Firefox versuche, wird alles deaktiviert, aber das Formular wird nicht mit den POST-Daten gesendet, die es enthalten soll. Ich kann jQuery nicht zum Senden des Formulars verwenden, da die Schaltfläche mit dem Formular gesendet werden muss, da mehrere Senden-Schaltflächen vorhanden sind und ich feststelle, welche von welchem Wert im POST enthalten ist. Ich muss das Formular wie gewohnt einreichen und danach alles deaktivieren.
Vielen Dank!
Antworten:
Update im Jahr 2018 : Ich habe gerade einige Punkte für diese alte Antwort erhalten und wollte nur hinzufügen, dass die beste Lösung darin besteht, die Operation idempotent zu machen, damit doppelte Einreichungen harmlos sind.
Wenn das Formular beispielsweise eine Bestellung erstellt, geben Sie eine eindeutige ID in das Formular ein. Wenn der Server zum ersten Mal eine Anforderung zur Auftragserstellung mit dieser ID sieht, sollte er diese erstellen und auf "Erfolg" antworten. Nachfolgende Einsendungen sollten ebenfalls mit "Erfolg" antworten (falls der Client nicht die erste Antwort erhalten hat), aber nichts ändern.
Duplikate sollten über eine Eindeutigkeitsprüfung in der Datenbank erkannt werden, um Rennbedingungen zu vermeiden.
Ich denke, dass Ihr Problem diese Zeile ist:
Sie deaktivieren ALLE Eingaben, einschließlich derjenigen, deren Daten das Formular senden soll.
Um nur die Senden-Schaltfläche (n) zu deaktivieren, können Sie Folgendes tun:
Ich glaube jedoch nicht, dass der IE das Formular senden wird, wenn auch diese Schaltflächen deaktiviert sind. Ich würde einen anderen Ansatz vorschlagen.
Ein jQuery-Plugin, um es zu lösen
Wir haben dieses Problem gerade mit dem folgenden Code gelöst. Der Trick dabei ist, mit jQuery's
data()
das Formular als bereits gesendet zu markieren oder nicht. Auf diese Weise müssen wir uns nicht mit den Submit-Buttons herumschlagen, was den IE ausflippt.Verwenden Sie es so:
Wenn es AJAX-Formulare gibt, die mehrmals pro Seitenladevorgang gesendet werden dürfen, können Sie ihnen eine Klasse geben, die dies angibt, und sie dann wie folgt aus Ihrer Auswahl ausschließen:
quelle
$(this)
zu einem zwischenzuspeichernvar that = $(this)
?$form
jedoch - 'form' verwendet, weil es aussagekräftiger ist, und das führende,$
weil es nach meiner Konvention bedeutet, dass es sich um ein jQuery-Objekt handelt.Der Timing-Ansatz ist falsch - woher wissen Sie, wie lange die Aktion im Browser des Clients dauern wird?
Wie es geht
Wenn das Formular gesendet wird, werden alle darin enthaltenen Schaltflächen zum Senden deaktiviert.
Denken Sie daran, dass in Firefox beim Deaktivieren einer Schaltfläche dieser Status gespeichert wird, wenn Sie in den Verlauf zurückkehren. Um dies zu verhindern, müssen Sie beispielsweise beim Laden von Seiten Schaltflächen aktivieren.
quelle
Ich denke, Nathan Longs Antwort ist der richtige Weg. Für mich verwende ich die clientseitige Validierung, daher habe ich nur eine Bedingung hinzugefügt, dass das Formular gültig ist.
BEARBEITEN : Wenn dies nicht hinzugefügt wird, kann der Benutzer das Formular niemals senden, wenn bei der clientseitigen Validierung ein Fehler auftritt.
quelle
event.timeStamp
funktioniert nicht in Firefox. Die Rückgabe von false ist nicht Standard. Sie sollten anrufenevent.preventDefault()
. Und wenn wir schon dabei sind, verwenden Sie immer geschweifte Klammern mit einem Kontrollkonstrukt .Um alle vorherigen Antworten zusammenzufassen, hier ist ein Plugin, das die Arbeit erledigt und browserübergreifend funktioniert.
Um Kern3l anzusprechen, funktioniert die Timing-Methode für mich einfach, weil wir versuchen, einen Doppelklick auf die Schaltfläche "Senden" zu stoppen. Wenn Sie eine sehr lange Antwortzeit auf eine Einreichung haben, empfehle ich, die Schaltfläche oder das Formular zum Senden durch einen Drehfeld zu ersetzen.
Das vollständige Blockieren nachfolgender Übermittlungen des Formulars, wie es die meisten der oben genannten Beispiele tun, hat einen schlimmen Nebeneffekt: Wenn ein Netzwerkfehler vorliegt und sie erneut versuchen möchten, dies zu tun, können sie dies nicht und verlieren die Änderungen, die sie vornehmen gemacht. Dies würde definitiv einen verärgerten Benutzer machen.
quelle
Bitte überprüfen Sie das jquery-safeform Plugin.
Anwendungsbeispiel:
quelle
Richtig. Deaktivierte Formularelementnamen / -werte werden nicht an den Server gesendet. Sie sollten sie als schreibgeschützte Elemente festlegen .
Außerdem können Anker nicht so deaktiviert werden. Sie müssen entweder ihre HREFs entfernen (nicht empfohlen) oder ihr Standardverhalten verhindern (besserer Weg), z. B.:
quelle
$('input[type=submit]').attr("disabled", "disabled");
aber meine Lieblingsmethode ist es,onclick="this.disabled = 'disabled'"
in den Onclick des Submit zu setzen.Es besteht die Möglichkeit, den Ansatz von Nathan Long zu verbessern . Sie können die Logik zur Erkennung bereits übermittelter Formulare durch folgende ersetzen:
quelle
Nathans Code aber für jQuery Validate Plugin
Wenn Sie zufällig das jQuery Validate-Plugin verwenden, ist der Submit-Handler bereits implementiert. In diesem Fall gibt es keinen Grund, mehr als einen zu implementieren. Der Code:
Sie können es einfach innerhalb des
} else {
Blocks erweitern, um Eingaben und / oder die Schaltfläche "Senden" zu deaktivieren.Prost
quelle
Am Ende habe ich Ideen aus diesem Beitrag verwendet, um eine Lösung zu finden, die der Version von AtZako ziemlich ähnlich ist.
Verwenden Sie wie folgt:
Ich habe festgestellt, dass die Lösungen, die keine Zeitüberschreitung, sondern nur die deaktivierte Übermittlung oder deaktivierte Formularelemente enthielten, Probleme verursachten, da Sie nach dem Auslösen der Sperre erst wieder senden können, wenn Sie die Seite aktualisieren. Das bereitet mir einige Probleme, wenn ich Ajax mache.
Dies kann wahrscheinlich ein wenig verschönert werden, da es nicht so schick ist.
quelle
Wenn Sie AJAX zum Posten eines Formulars verwenden,
async: false
sollte set zusätzliche Übermittlungen verhindern, bevor das Formular gelöscht wird:quelle
Die Lösung von Nathan für Bootstrap 3 wurde ein wenig geändert. Dadurch wird ein Ladetext für die Schaltfläche "Senden" festgelegt. Außerdem tritt nach 30 Sekunden eine Zeitüberschreitung auf, und das Formular kann erneut gesendet werden.
quelle
Verwenden Sie zwei Senden-Schaltflächen.
Und jQuery:
quelle
Verwenden Sie beim Senden einen einfachen Zähler.
Und rufen Sie die
monitor()
Funktion beim Absenden des Formulars auf.quelle
Ich hatte ähnliche Probleme und meine Lösung (en) lauten wie folgt.
Wenn Sie keine clientseitige Validierung haben, können Sie einfach die hier dokumentierte Methode jquery one () verwenden.
http://api.jquery.com/one/
Dies deaktiviert den Handler, nachdem er aufgerufen wurde.
Wenn Sie wie ich eine clientseitige Validierung durchführen, ist dies etwas schwieriger. Im obigen Beispiel können Sie nach einer fehlgeschlagenen Validierung nicht erneut senden. Versuchen Sie stattdessen diesen Ansatz
quelle
Sie können die zweite Übermittlung dadurch stoppen
quelle
Meine Lösung:
quelle
In meinem Fall hatte der Onsubmit des Formulars einen Validierungscode, daher erhöhe ich die Antwort von Nathan Long einschließlich eines Onsubmit-Prüfpunkts
quelle
Schaltfläche "Senden" ändern:
Mit normaler Taste:
Verwenden Sie dann die Klickfunktion:
Und denken Sie daran, die Schaltfläche erneut zu aktivieren, wenn dies erforderlich ist:
quelle
Ich kann den guten, altmodischen CSS-Trick von Zeigerereignissen nicht glauben: Keiner wurde noch nicht erwähnt. Ich hatte das gleiche Problem beim Hinzufügen eines deaktivierten Attributs, aber dieses wird nicht zurückgesendet. Versuchen Sie Folgendes und ersetzen Sie #SubmitButton durch die ID Ihrer Senden-Schaltfläche.
quelle
Enter
Taste drückt .Warum nicht einfach das? Dadurch wird das Formular gesendet, aber auch die Schaltfläche zum Senden deaktiviert.
Wenn Sie jQuery Validate verwenden, können Sie diese beiden Zeilen auch unter setzen
if ($('#myForm').valid())
.quelle
Dieser Code zeigt das Laden auf der Tastenbeschriftung an und setzt die Taste auf
Deaktivieren Sie den Status, aktivieren Sie ihn nach der Verarbeitung erneut und geben Sie den ursprünglichen Schaltflächentext zurück **
quelle
Ich habe ein sehr ähnliches Problem gelöst mit:
quelle