buninho: Vermeidung von doubleclicks beim submit

Hallo zusammen,

zur Vermeidung von doubleclicks beim Abschicken von Formulardaten verwenden wir folgendes Javascript:

  
var lastClickTime = 0;  
  
function preventDoubleClick() {  
	var clickDate, actualClickTime;  
	clickDate = new Date();  
	if (lastClickTime === 0) {  
		lastClickTime = clickDate.valueOf();  
		return true;  
	} else {  
		actualClickTime = clickDate.valueOf();  
		if ((actualClickTime - lastClickTime) > 3000) {  
			lastClickTime = 0;  
			return true;  
		}  
		return false;  
	}  
	return true;  
}  

Im Formular ist es so eingebunden:

  
<input name="submitbutton" type="submit" value="submit"	onclick="return preventDoubleClick();" />  

Es werden nach einem submit also für 3 Sekunden die weiteren submits nicht gesendet - was soweit auch funktioniert.

Im folgenden Fall ist es aber dennoch möglich, innerhalb der "gesperrten Zeit" die Daten ein zweites Mal zu senden:

Und zwar, wenn man für den zweiten submit einen Zeitpunkt erwischt, in dem der erste submit bearbeitet wurde, der Browser also gerade den Response empfängt bzw. verarbeitet.

Dabei zeigt sich dann folgendes verhalten:

Zunächst wird die success-View des ersten submits im Browser (firefox 3.0.8) angezeigt. Der erste request wurde also erfolgreich bearbeitet, bei der success-View handelt es sich um eine andere Seite als die Formular-Seite.
Kurz darauf wird dann allerdings die error-View des zweiten requests angezeigt, die ja eigentlich durch das script verhindert werden sollte.

Dies Verhalten ist durch zwei Klicks auf den submit-button zu erreichen, die innerhalb von 3 Sekunden stattfinden.

Kann jemand dieses Verhalten erklären? Wurde hier die globale Variable lastClickTime evtl. beim Empfang des response schon auf 0 gesetzt, obwohl das Formular noch angezeigt wird?

Vielen Dank schon Mal für jede Antwort!

Für Hinweise auf Artikel bzw. Links zum Doppelklick-Submit-Problem bin ich ebenfalls dankbar.

Grüße
Peter

  1. Hallo,

    erklären kann ich die Beobachtung nicht, aber es ist nicht so recht definiert, was mit JS-Ereignissen passiert, die zwischen dem »Abräumen« des abgesendeten Formulars und dem vollständigen Darstellen der Serverantwort passieren.

    Deine Methode scheint mir unnötig kompliziert und sie hängt eben von der korrekten JavaScript-Ausführung in dieser Grauzone zwischen den beiden Dokumenten ab. Ich würde den Ansatz wählen, den Submit-Button auf disabled zu stellen. Dann nimmt der Browser gar keine Klicks darauf entgegen und es hängt nicht von einem JS-Event-Handler ab, ob diese Klicks zum Absenden des Formulares führen. Beispiel:

    window.onload = function () {
       document.forms.formular.onsubmit = sperreButton;
    };

    function sperreButton () {
       var button = document.forms.formular.elements.submitbutton;
       button.disabled = true;
       window.setTimeout(function () {
          button.disabled = false;
       }, 3000);
    }

    Wie du siehst, arbeite ich hier weder mit Klick-Handlern, muss nicht die Zeit messen und muss auch nicht mit return false die Standardaktion des Ereignisses (das Absenden des Formulars) unterdrücken. Beim submit wird einfach der Button ausgegraut, dann ist kein erneutes Absenden mehr möglich (zumindest nicht durch einen Klick auf den Button). Nach 3 Sekunden Verzögerung wird der Button wieder freigegeben.

    Mathias

    1. Hallo Matthias,

      Danke für Dein Antwort, damit ist mein Problem gelöst. Zum Verständis würde mich zwar auch interessieren, was da in der Grauzone genau passiert, aber wichtiger ist ja ertsmal eine funktionierende Lösung. Also, vielen Dank für Deine Hilfe.

      Grüße
      Peter