CSS Kochbuch

7.10 Buttons, die nur einmal benutzt werden können

Problem

Es soll verhindert werden, dass Benutzer einen Submit-Button mehr als einmal anklicken.

Lösung

Zu Beginn legen Sie eine Klasse an, die verhindert, dass der Button angezeigt wird:

.buttonSubmitHide {
 display: none;
}

Dann benutzen Sie den folgenden (bereits aus dem vorigen Rezept bekannten) JavaScript-Code, um die Stildefinitionen anhand von Klassenselektoren auszutauschen:

<script language="JavaScript" type="text/javascript">
function classChange(styleChange,item) {
 item.className = styleChange;
}
</script>

Mit Hilfe des onsubmit-Events wird die oben definierte Funktion aufgerufen, wodurch der Button nach dem ersten Abschicken des Formulars verborgen wird:

<h2>Ihre Bestellung</h2> <form action="login.php" ...