Submit Button nach Klicken deaktivieren

Druckbare Version

15-12-2010, 15:58
asterix88

Submit Button nach Klicken deaktivieren

Hallo,
ich möchte in einem HTML-Formular einen Submit-Button nach dem ersten Klicken deaktivieren. Danach soll dann der Inhalt des Formulars an die PHP-Datei übergeben werden. Ich habe eigentlich keine Ahnung von JavaScript, kann nur so die ein oder andere Funktion. Hier mein Code:

Code:

onclick="this.disabled=true;"

oder

Code:

onclick="this.disabled=true; return true"

Das Googlen hat mich nicht weitergebracht, bzw. funktionieren die Sachen von dort nicht.
Zwar wird der Button nach dem Klicken deaktiviert, allerdings wird dann nichts submitted...

Weiß einer wie es richtig geht?

mfg asterix
15-12-2010, 21:04
zenobic

Zitat:

Zitat von asterix88

Hallo,
ich möchte in einem HTML-Formular einen Submit-Button nach dem ersten Klicken deaktivieren.

hi,

wenn es ein klassischer "Form submit" ist, dann muss man eigentlich auch serverseitig arbeiten oder über Cookies gehen, da der "Form submit" ein Request auslöst der dasselbe oder ein anderes Skript aufruft.

Man arbeitet dann besser zusätzlich mit einem Token der z.B. in der Session gespeichert wird und in der Form als hidden field mitübergeben wird.

Es gibt in JavaScript mehrere Möglichkeiten, z.B. im "onsubmit" der Form oder im "onclick" Handler den Button "disablen" und danach den Request absetzen.

Das Verhalten mit dem Reload kann man so ganz einfach nachvollziehen:

HTML-Code:

<!DOCTYPE html> <html> <body> <form id=form_id> <input type=button id=submit_btn value="Submit Query" > <input type=submit id=real_submit_btn > </form> </body> <script> document.getElementById('submit_btn').onclick = function() { document.getElementById('submit_btn').disabled = true; document.getElementById('submit_btn').value = 'working...'; // AJAX Request oder explizit Form submit() etc. }; // reload and away document.getElementById('form_id').onsubmit = function() { alert("real submit"); document.getElementById('real_submit_btn').disabled = true; document.getElementById('real_submit_btn').value = 'working...'; }; </script> </html>
16-12-2010, 16:50
asterix88

das funktioniert bei mir auch nicht :confused:

Ich möchte folgendes erreichen: Wenn auf den Button geklickt wird, wird ein Forumlar an eine PHP-Datei übergeben, welche die Daten dann auswertet und in eine Datenbank schreibt. Da die ja mal eine Sekunde oder so dauern kann, könnte man ja öfter klicken. So erscheint der Eintrag dann mehrmals in der Datenbank. Das ist syntaktisch korrekt, weil durch die autmatisch andere ID nicht 2 gleiche Datensätze entstehen.

Beim ersten Klicken soll der Button deaktiviert werden, und danach soll das Formular gesendet werden. Durch die PHP-Seite wird dann auf eine andere Seite verlinkt.

Ich hab mir das so vorgestellt: gibt es keine "Bordmittel" die man einfach in das onClick-Attribut einbauen kann, damit das so funktioniert?
16-12-2010, 19:12
zenobic

Zitat:

Zitat von asterix88

das funktioniert bei mir auch nicht :confused:

Es funktioniert doch generell, oder bei dir nicht?
Es soll veranschaulichen, warum es nicht mit clientseiteigen Code geht (Button 2),
es sei denn du gehst über einen Ajax Request (Button 1).
Dann ist der User gezwungen JavaScript zu verwenden.

Zitat:

Zitat von asterix88

Ich hab mir das so vorgestellt: gibt es keine "Bordmittel" die man einfach in das onClick-Attribut einbauen kann, damit das so funktioniert?

Eine bewährte Methode läuft über einen Token und natürlich serverseitig.

Code:

<input type="submit" <?php if ($_SESSION['user_submitted']) echo "disabled='disbabled'"; ?> >

Es gibt noch Alternativen, man könnte noch mit JavaScript ein Cookie setzen, aber ich würde mich nicht darauf verlassen, dass jeder JavaScript pauschal (bei verbreiteteten Firefox AddOn wie "NoScript"
) aktiviert hat.