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>
Eingabefeld


Formular zurücksetzen
Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht