Logo von www.onlex.de
Formular Workshop

Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer
Onlex auf Facebook verwenden Onlex bei Google empfehlen Onlex auf Twitter verwenden

Absendebutton nach Anklicken deaktivieren
<script>

Damit sich niemand einen Scherz erlaubt und ein Formular x-mal versendet und man einer Spamflut ausgesetzt ist, kann man den Absendebutton nach einem Klick deaktivieren.

Hier ein Beispiel eines Formulars mit solch einer Funktion:

Eingabefeld:

Passwort- / Spamschutz: Bitte gib trowssap ein


Quelltext-Auszug:

<form action="http://www.onlex.de/_formmailer.php4?username=formws" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8" name="Kontakt" onsubmit="window.open('about:blank','bestaetigung', 'width=350,height=250,left=250,top=250'); document.Kontakt.Senden.disabled=true; setTimeout('document.Kontakt.Senden.disabled=false', 3000);" target="bestaetigung">

<input type="hidden" name="Formular" value="JavaScript-Ecke">

Eingabefeld:<br>
<input type="text" name="eingabefeld" size="30"<br>

Passwort- / Spamschutz: Bitte gib <i>trowssap</i> ein<br>
<input type="password" name="onlex_password" size="30" maxlength="15"><br>

<input type="submit" name="Senden" value="Daten absenden">

</form>
Bitte den Benutzernamen (hier rot und kursiv dargestellt) beim Kopieren anpassen.

Im Event-Handler "onsubmit" wurde der Code document.Kontakt.Senden.disabled=true; eingefügt. Also die Funktion, was beim Absenden (onsubmit) passieren soll.

document bezieht sich auch hier auf das aktuell geladene Dokument / HTML Seite, Kontakt bezieht sich auf das Element, was den Namen (name) "Kontakt" hat. In unserem Fall ist es der <form> Befehl. Ebenso bezieht sich Senden auf das Element mit dem Namen "Senden": unser Absendebutton. Mit disabled=true geben wir an, dass der Button ohne Funktion sein soll.

Damit Nutzer, die einen Tippfehler gemacht haben, die Seite nicht neuladen und alle Angaben von neuem einfügen müssen, wurde im Quelltext eingebaut, dass nach 3 Sekunden der Absendebutton wieder aktiv wird:
setTimeout('document.Kontakt.Senden.disabled=false', 3000);
Wär sonst ärgerlich, oder? ;-)


^ zum Seitenanfang ^



© 2002 - 2016 · www.onlex.de - HomepageTools | Impressum | Sitemap