Buttons, die nur einmal benutzt werden können

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

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" method="post" onsubmit="classChange('buttonSubmitHide',submit); return true; ">
  <div align="center">
    <p>Wollen Sie wirklich 12 Dosen Blubberwasser im Web kaufen?</p>
    <label for="uname">Endsumme:</label>
    <input type="text" name="uname" id="uname" value="€ 7.95" />
    <br />(19% Mehrwertsteuer enthalten, Porto und Verpackung extra)<br />
    <input type="submit" name="submit" value="Jetzt bestellen" class="buttonSubmit" />
  </div>
</form>

Diskussion

In dieser Lösung bewirkt die JavaScript-Funktion einen Austausch der Stilregeln für den Submit-Button. Wir benutzen hier das onsubmit-Event, um die Funktion aufzurufen, damit das Formular auch abgeschickt wird. Verwenden wir stattdessen ein onclick-Event, würde bei einigen Browsern nur die CSS-Klasse geändert, wobei der Button unsichtbar wird und das Formular nicht abgeschickt werden kann.

Siehe auch

Das JavaScript & DHTML Cookbook von Danny Goodman (O’Reilly) für weitere Rezepte, in denen JavaScript und CSS gemeinsam benutzt werden.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln