JavaScript Form Beispiel 3: Reset / Zurücksetzen

In manchen Fällen ist es praktisch, wenn der Benutzer die bereits eingegebenen oder anderweitig vorbelegten Felder eines Formulars auf einen Streich löschen kann. Hierzu gibt es zwei Möglichkeiten: Zum Einen kann der Inhalt des Formulars durch Anklicken eines Reset-Buttons, der innerhalb des Formulars definiert sein muss, gelöscht werden. Die zweite Möglichkeit besteht darin, dass die Eingaben durch Aufruf der Methode reset aus dem Formular entfernt werden.

Die Methode reset ist, genau wie die Methode submit, stets an ein bestimmtes Formular gebunden. Wird sie aufgerufen, so werden ausschliesslich die Eingabeelemente des betreffenden Formulars geleert. Alle anderen auf einer Website definierten Formulare bleiben unangetastet. Der Aufruf der reset-Methode kann über das Betätigen eines Links erfolgen. Auch hier bietet sich wieder der Einsatz eines Event-Handlers, der an ein bestimmtes JavaScript Event gebunden ist, an. Wenn ein bestimmtes Event ausgelöst wird, ruft der Event-Handler dann automatisch die reset-Methode des Formulars auf.

Wird ein Link zum Auslösen der Aktion angeboten, so kommt unter den Events bespielsweise das onClick-Event in Frage. Es ist aber auch möglich die Eingabedaten eines Formulars nach Ablauf einer bestimmten Zeit automatisch zu löschen. Hierzu kann sich der Webentwicker der Methode setTimeout bedienen. Diese Methode sorgt dafür, dass nach Ablauf einer bestimmten Zeitspanne eine bestimmte JavaScript-Anweisung aufgerufen wird. Sie gehört zur Schnittstelle des Objeks Window.

Im unteren Beispiel wird wieder ein HTML-Formular mit dem entsprechenden HTML-Code definiert. Die Eingabeelemente dieses Forms sind ein Textfeld, welches der Eingabe von Daten dient, sowie zwei Buttons. Der erste Button ist vom Typ reset, was durch Angabe von reset im Type-Attribut des Input-Elements festgelegt ist. Klickt der Benutzer diesen Button an, so wird das Formular geleert. Mit dem darauf folgenden Button werden die eingegebenen Daten an den Webserver geschickt, wenn der Benutzer diesen anklickt. Hier ist der Typ mit submit im Type-Attribut des Form-Elements angegeben.

Vor dem JavaScript-Bereich wird noch ein Link (mit dem HTML A-Tag) definiert, der die zweite Möglichkeit des Zurücksetzens von Formulardaten demonstrieren soll. Hier wird das onClick-Event des Links mit einer Event-Handler-Funktion (resetAufrufen) belegt, die aufgerufen wird, wenn der Benutzer den Link anklickt.

Im JavaScript-Code wird dann die JavaScript Function resetAufrufen implementiert. Wird der Link angeklickt, dann übernimmt diese Funktion das Löschen aller Eingabeelemente des Formulars mit dem Namen formular1. Das Document-Object enthält alle in einer Internetseite enthaltenen Formulare und macht sie über deren Namen (festgelegt im Form-Attribut name) per DOM (Document Object Model) zugänglich. Für das Form mit dem Namen formular1 sind die Methoden reset und submit über das in der Objekthierarchie angesprochene Objekt aufrufbar – die Methode reset wird durch die JavaScript-Funktion aufgerufen. Unter JavaScript Code in HTML integrieren finden Sie weitere Informationen bezüglich der Integration von JavaScript-Code in eine HTML-Datei.

<form name="formular1" method="get">
  Eingabefeld <input id="tname" name="Textfeld" type="text" /><br>
  <input type="reset" name="Reset-Button" value="Zur&uuml;cksetzen" />
  <input type="submit" name="Submit-Button" value="Daten abschicken" /><br><br>
  <a href="" onclick="resetAufrufen()">Formular zur&uuml;cksetzen</a>
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Funktion leert die Eingabeelemente eines HTML-Formulars
  function resetAufrufen () {
    // Formular leeren, indem die Reset-Methode des
    // Formulars aufgerufen wird. Die Reset-Methode
    // ist für jedes in einem HTML-Dokument definierte
    // Formularelement definiert.
    document.formular1.reset ();
  }
  // -->
  </script>
</form>

« zurück zu Seite 1 2 weiter zu Seite 4 5 6 7 8 9 »