✔ Doppelklick verhindern

T

Thomasio

Erfahrenes Mitglied
Ich habe ein HTML Formular, was an ein PHP Script gesendet wird.
Das Script braucht je nach Serverauslastung 1 - 10 Sekunden bevor es durch ist und Antwort senden kann.
Während dieser Zeit sieht der User noch sein Formular mit dem Absenden Button drunter und wenn er glaubt es dauert zu lange, klickt er nochmal auf den Button.
Er könnte natürlich auch aus Versehen einen Doppelklick drauf gemacht haben.
Das Selbe wenn der User statt Buttonklick in einem der Eingabefelder die Enter-Taste (doppelt) drückt.

Mein Script fängt den Error schon ab, sprich der User bekommt für den zweiten Klick eine Fehlermeldung angezeigt, aber das heisst auch, der User sieht die Bestätigung, dass sein erster Klick erfolgreich war nicht, er sieht nur die Fehlermeldung und fragt sich natürlich, ob jetzt alles in Ordnung ist.

In kurz:
Wie verhindere ich, dass der User das Formular doppelt absenden kann?
Es wäre mir egal, ob in PHP oder JavaScript oder sonstwas.

Im Web habe ich zwar ein paar Hinweise gefunden, wie man nach erfolgreicher Antwort verhindert, dass ein Seitenrefresh die Daten nochmal sendet, aber mein Problem liegt schon vorher.
 
Hi,

ungetestet, aber spontal würde mir das hier einfallen:

HTML: 
<form onsubmit="this.style.visibility = 'hidden';">
...
(Das Formular blendet sich aus...)

@saftmeister
deine Lösung sieht zwar wahrscheinlich schöner aus, aber was ist mit Enter-Drücken im Textfeld?
 
Zuletzt bearbeitet:
Ich würde zusätzlich noch einen Kontrollcode einführen. Dieser wird beim Aufruf des Formulars erzeugt und zum Versand verwendet. Wenn der Code ein zweites Mal am Server ankommt, müsste dieser einen Fehler melden.

Allerdings ist das auch nur rumbasteln am Effekt. Ich würde eher die Ursache mal untersuchen. Ein 10 Sekunden laufendes Script ist doch recht ungewöhnlich.
 
Den Button disablen reicht nicht, wie javaDevelopper schon sagt, weil Enter im Eingabefeld immer noch geht.
Den Kontrollcode habe ich eh drin.
Mir geht es darum, dass meine User die Bestätigungsmeldung vom ersten Absenden sehen, denn wenn nur der Error fürs doppelt Senden auftaucht wissen die DAUs nicht was das soll.

Das ist eigentlich kein 10 Sekunden Script, schon gross, aber normalerweise reicht eine Sekunde, nur ist bei meinem Provider der Server ab und wann so ausgelastet, dass es zu Spitzenzeiten viel länger dauert.

In der Zwischenzeit habe ich mir sowas gebastelt:

Code: 
...

</head>
<script type="text/javascript">
var Clicked = 0;
</script>
<body>

...

<form onsubmit="if(Clicked){return false;} Clicked = 1;" ... >

...

Keine Ahnung wie "schön" das ist, aber es scheint zu funktionieren.
 
Das mit Enter drücken war nicht im Titel, aber es war in meiner ersten Frage mit drin, vielleicht hätte als Titel "doppelt senden" besser gepasst.
Google hatte ich natürlich zuerst befragt, aber genau wie 4guysfromrolla beschäftigen die sich alle mit dem submit Button oder gleich dem ganzen Formular.

Wenn ich das mit meiner Lösung vergleiche, finde ich meine Lösung kürzer und effektiver.
Wenn ich nur wüsste, warum mir meine Lösung "zu einfach" erscheint.
 
Ich fände auch dass die schönste Möglichkeit ein Layer wäre vll mit einem sich bewegendem Bild das anzeigt dass die Anfrage gerade verarbeitet wird :)
 
JavaScript ist es in jedem Fall, funktioniert also nur, wenn der User JavaScript erlaubt.
Ob ich den onsubmit kille, den Button oder das ganze Formular deaktiviere ist nur Kosmetik, an der Funktion ändert es nichts.

Ich experimentiere gerade damit im onsubmit die Beschriftug vom Button in "Bitte warten" zu ändern und den Mauszeiger zur Sanduhr zu machen, ist aber auch alles JavaScript, sprich nur Kosmetik.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück