Formulare

Mit dem Objekt forms[#], das in der JavaScript-Objekthierarchie unterhalb des document-Objekts liegt, hat man Zugriff auf Formulare, die in einer HTML-Datei definiert sind.
Es stehen folgende Schemata zur Verfügung, mit JavaScript ein bestimmtes Formular anzusprechen:

Schema	Erläuterung
document.forms[i].Eigenschaft document.forms[i].Methode()	Indexnummer i gibt an, das wievielte Formular in der Datei gemeint ist (erstes Formular erhält Index 0!)
document.forms["FormularName"].Eigenschaft document.forms["FormularName"].Methode()	Name des Formulars statt Index verwenden
document.FormularName.Eigenschaft document.FormularName.Methode()	Name des Formulars statt Objekt forms[#] verwenden

Die Methode reset()

Mit der Methode reset() angewandt auf das Objekt forms werden alle Eingaben im Formular gelöscht (zurückgesetzt).

Beispiel:

<form name="Test">
Name:  <input name="Name"><br>
Alter: <input name="Alter"><br>
</form>
<input type="button" value="Formular leeren" onclick="document.Test.reset()">

Erläuterung:
Das Beispiel enthält ein Formular mit zwei Eingabefeldern. Unterhalb des Formulars steht Button. Beim Anklicken des Buttons werden alle Eingaben in dem Formular gelöscht.

Die Methode submit()

Mit der Methode submit() angewandt auf das Objekt forms wird die Aktion im Form-Tag ausgeführt, d.h. die Formulardaten werden versandt.
Man kann natürlich auch gleich den Submit-Button verwenden.

Beispiel

  <form name="Test" action="mailto:xyz@bsz-glauchau.de" method="post">
  <input type=text size=40 name="Name"><br>
  <input type=text size=40 name="Alter"><br>
  <input type=button value="nach 5 Sekunden senden" onclick="window.setTimeout('document.Test.submit()',5000)">
  </form>

Erläuterung:
Das Beispiel enthält ein Formular mit 2 Eingabefeldern. Nach Klick auf den Button wird nach 5000 Millisekunden, also nach 5 Sekunden, die Methode submit() aufgerufen.

Mit dem Objekt elements, das in der JavaScript-Objekthierarchie unterhalb des forms-Objekts liegt, hat man Zugriff auf die Elemente eines Formulars.
Es stehen folgende Schemata zur Verfügung, mit JavaScript ein bestimmtes Formularelement anzusprechen:

Schema	Erläuterung
document.forms[i].elements[j].Eigenschaft document.forms[i].elements[j].Methode()	Indexnummer j gibt an, das wievielte Element innerhalb des Formulars gemeint ist (erstes Element erhält Index 0!)
document.FormularName.ElementName.Eigenschaft document.FormularName.ElementName.Methode()	Elementname, wie er bei der Definition des Elements mit dem Attribut name= zugewiesen wurde

Hinweis:

Hinter dem, was hier als elements-Objekt bezeichnet wird, verbergen sich in Wirklichkeit mehrere, allerdings sehr ähnliche JavaScript-Objekte.
So gibt es Objekte für:
ein- oder mehrzeilige Eingabefelder, Radio-Buttons, Checkboxen, Auswahllisten, Passwort-Felder, Absende-Button, Abbrechen-Button, Klick-Buttons oder versteckte Elemente,

Checkboxen und Radiobuttons bilden normalerweise Gruppen mehrerer zusammengehöriger Elemente, die jeweils den gleichen Namen haben und sich nur durch die Angabe value unterscheiden.
Solche Gruppen mit gleichen Namen bilden in JavaScript wiederum einen Array.

Beispiel:

Gegeben ist folgendes Formular:

  <form name="Formular">
    <input type=radio name="Favoriten" value="A"> Favorit A
    <input type=radio name="Favoriten" value="B"> Favorit B
    <input type=radio name="Favoriten" value="C"> Favorit C
  </form>

Um nun z.B. das 3. Element (Radiobutton) anzusprechen, benötigt man:

document.Formular.Favoriten[2]

Die Elementeigenschaft value

Mit der Elementeigenschaft value kann man auf den Wert eines Formularelementes sowohl lesend als auch schreibend zugreifen.
Sie ist damit die wichtigste Eigenschaft des elements-Objektes.

Beispiel:

<script language="JavaScript">
function berechne()
{
  umsatz = parseFloat(document.Rechner.Umsatz.value);
  mwst = umsatz / 119 * 19;
  document.Rechner.MWSt.value = Math.round(100 * mwst) / 100;
}
</script>
<form name="Rechner">
Umsatz: <input name="Umsatz" size="10"> Euro<p>
<input type="button" value="Berechne" onclick="berechne()"><p>
Enthaltene MWSt: <input name="MWSt" size="10"> Euro
</form>

Erläuterung:

Die Funktion berechne(), die bei Klick auf den Button aufgerufen wird, liest zuerst den Wert des Formularelementes Umsatz aus und speichert diesen unter umsatz.
Die Mehrwertsteuer wird berechnet und auf zwei Kommastellen gerundet als Wert in das Formularelement MWSt geschrieben.

Die Elementeigenschaft checked

Die Elementeigenschaft checked speichert, ob ein Radiobutton oder eine Checkbox ausgewählt ist oder nicht.
Sie hat damit entweder den Wert true oder false und kann gelesen oder verändert werden, d.h. man kann eine Vorselektierung vornehmen

Beispiel:

  <script language="JavaScript">
  function weiter()
  {
   if(document.Testform.Sportart[0].checked == true)
    window.location.href="leichtathletik.htm"
   else if(document.Testform.Sportart[1].checked == true)
    window.location.href="boxen.htm"
   else
    alert("Bitte eine Auswahl treffen");
  }
  </script>
  <body>
  <form name="Testform">
    Wählen Sie!
  <input type=radio name="Sportart"> Leichtathletik
  <input type=radio name="Sportart"> Boxen
  <br><input type=button value="Starten" onClick="weiter()">
  </form>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Radiobutton. Der Anwender kann dabei zwischen Leichtathletik und Boxen auswählen.
Beim Klick auf den Button Starten wird die Funktion weiter() aufgerufen.
Diese Funktion prüft, ob einer der beiden Radiobuttons ausgewählt wurde. Je nachdem, welcher von beiden aktiviert ist, wird eine unterschiedliche Datei aufgerufen ( location.href). Wenn keiner der beiden Radiobuttons ausgewählt wurde, wird eine entsprechende Meldung angezeigt.

Die Elementeigenschaften name und type

Mit der Elementeigenschaft name kann man auf den Namen und mit type auf den Type eines Formularelementes lesend zugreifen.

Die Elementmethode blur()

Die Methode blur() entfernt den Fokus vom Element.

Beispiel:

<form name="Testform">
  <input name="Feld" size=30 onFocus="this.form.Feld.blur()">
</form>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Textfeld. Wenn der Anwender den Cursor in das Feld setzen will, wird der Cursor mit blur() sofort wieder aus dem Feld entfernt.
Eine solche Maßnahme kann beispielsweise sinnvoll sein, wenn man ein Feld ausschließlich als Ausgabefeld nutzen wollen, in dem der Anwender nichts editieren können soll.

Die Elementmethoden focus() und select()

Beispiel:

<form name="Testform">
  Kopieren Sie folgende URL in die Adress-Zeile Ihres Browsers:<br>
  <input type=text size=40 name="URL" value="www.meinelt-online.de">
</form>
<script language="JavaScript">
  document.Testform.URL.focus();
  document.Testform.URL.select();
</script>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Textfeld. Das Feld wird mit dem Wert "www.meinelt-online.de" vorbelegt.
Unterhalb des Formulars ist ein Scriptbereich notiert. Der Scriptbereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt.
Dort wird zunächst mit document.Testform.URL.focus() das Formularelement augewählt, denn das Selektieren von Text ist nur möglich, wenn das Feld den Focus hat. Der vorbelegte Text des Formularfeldes wird dann mit document.Testform.Code.select() selektiert.