SELFHTML/Quickbar  JavaScript  Objektreferenz


forms

Diese Seite ist ein Dokument mit Informationstext

 forms: Allgemeines zur Verwendung

Eigenschaften:

  action (Empfängeradresse bei Absenden)
  encoding (Kodierungstyp)
  length (Anzahl Formulare in Datei)
  method (Übertragungsmethode)
  name (Formularname)
  target (Zielfenster für CGI-Antworten)

Methoden:

  handleEvent() (Ereignis verarbeiten)
  reset() (Formulareingaben löschen)
  submit() (Formular abschicken)

Unterobjekte:

  elements

 

forms: Allgemeines zur Verwendung

Mit dem Objekt forms, das in der JavaScript-Objekthierarchie unterhalb des  document-Objekts liegt, haben Sie Zugriff auf Formulare, die in einer HTML-Datei definiert sind.

Es stehen folgende Arten zur Verfügung, mit JavaScript ein bestimmtes Formular anzusprechen:

Schema 1 / Beispiel 1:

document.forms[#].Eigenschaft
document.forms[#].Methode()

Ziel = document.forms[0].action;
document.forms[0].reset();

Schema 2 / Beispiel 2:

document.forms["FormularName"].Eigenschaft
document.forms["FormularName"].Methode

Ziel = document.forms["Testformular"].action;
document.forms["Testformular"].reset();

Schema 3 / Beispiel 3:

document.FormularName.Eigenschaft
document.FormularName.Methode()

Ziel = document.Testformular.action;
document.Testformular.reset();

Erläuterung:

Formulare können Sie auf drei Arten ansprechen:

Die Eigenschaften und Methoden des forms-Objekts betreffen nur Bestandteile des gesamten Formulars, etwa die Kodiermethode. Um auf einzelne Eingabefelder, Buttons usw. zuzugreifen, steht das  elements-Objekts mit seinen Unterobjekten zur Verüfgung.

 

JavaScript 1.0Netscape2.0MS IE3.0Lesen/Ändern action

Speichert den Wert, der bei der Definition des Formulars im Attribut action= steht, also etwa eine mailto-Angabe oder ein Server-Programm, das die Formulardaten verarbeitet.

Beispiel:

<html><head><title>Test</title>
<script language="JavaScript">
function Bestaetigung()
{
 x = window.confirm("Dieses Formular geht an " + document.Testform.action);
 return x;
}
</script>
</head><body>
<form name="Testform" action="mailto:duselbst@deine.com" 
onSubmit="return Bestaetigung()">
<input type=text size=40 name="Eingabe">
<input type=submit value="Absenden">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion Bestaetigung() aufgerufen, weil im einleitenden <form>-Tag der  Event-Handler onSubmit= notiert ist. Dieser ermittelt den Rückgabewert der Funktion Bestaetigung(). Ist der Rückgabewert true, wird das Formular abgeschickt, ist er false, wird es nicht abgeschickt.

Innerhalb der Funktion Bestaetigung() erhält der Anwender mit der  confirm-Methode ein Dialogfenster, in dem ihm der Wert der Formularangabe action angezeigt wird. Confirm-Fenster haben stets zwei Buttons, einen zum Bestätigen und einen zum Abrrechen. Der Button zum Bestätigen gibt bei Anklicken true zurück, der Abbrechen-Button false. Der Rückgabewert wird im Beispiel in der Variablen x gespeichert. Diese wird wiederum von der Funktion Bestaetigung() selbst zurückgegeben, denn der aufrufende Event-Handler erwartet ja einen solchen Rückgabewert.

 

JavaScript 1.0Netscape2.0MS IE3.0Lesen/Ändern encoding

Speichert den Wert, der bei der Definition des Formulars im Attribut encoding= steht, also zum Beispiel "text/plain".

Beispiel:

<html><head><title>Test</title>
<script language="JavaScript">
function CodeTyp()
{
 if(document.Testform.action.indexOf("@") > 0)
  document.Testform.encoding = "text/plain";
 else
  document.Testform.encoding = "x-application/x-www-form-urlencoded";
 return true;
}
</script>
</head><body>
<form name="Testform" action="mailto:duselbst@deine.com" 
onSubmit="return CodeTyp()">
<input type=text size=40 name="Eingabe">
<input type=submit value="Absenden">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion CodeTyp() aufgerufen.

Innerhalb der Funktion CodeTyp() wird ermittelt, ob in der action-Angabe des Formulars das Zeichen @ vorkommt, das eine E-Mail-Adresse verrät. Wenn ja, wird der Kodierungstyp auf text/plain gesetzt, ansonsten auf den für CGI-Programme üblichen Kodiertyp x-application/x-www-form-urlencoded. Die Funktion CodeTyp() gibt true zurück, denn der aufrufende Event-Handler onSubmit im einleitenden <form>-Tag erwartet einen solchen Rückgabewert. Das Formular wird nur abgeschickt, wenn der Rückgabewert true ist.

Um in einer Zeichenkette nach einem oder meherern Zeichen zu suchen wie im Beispiel mit der Methode indexOf(), lesen Sie den Abschnitt über das  string-Objekt.

 

JavaScript 1.0Netscape2.0MS IE3.0Lesen length

Speichert die Anzahl der Formulare, die in einer Datei definiert sind.

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="mailto:duselbst@deine.com">
<input type=hidden value="Guildo">
<input type=submit value="Guildo">
</form>
<form name="Testform" action="mailto:duselbst@deine.com">
<input type=hidden value="Heino">
<input type=submit value="Heino">
</form>
<script language="JavaScript">
 document.write(document.forms.length + " Formulare");
</script>
</body></html>

Erläuterung:

Im Beispiel werden zwei kleine Formulare definiert. Am Ende wird mit Hilfe von  document.write() zum Testen in die Datei geschrieben, wie viele Formulare darin definiert sind.

 

JavaScript 1.0Netscape2.0MS IE3.0Lesen/Ändern method

Speichert den Wert, der bei der Definition des Formulars im Attribut method= steht, normalerweise "get" oder "post".

Beispiel:

<html><head><title>Test</title>
<script language="JavaScript">
function Methode()
{
 if(document.Testform.action.indexOf("@") > 0)
  document.Testform.method = "post";
 else
  document.Testform.method = "get";
 return true;
}
</script>
</head><body>
<form name="Testform" action="mailto:duselbst@deine.com" 
onSubmit="return Methode()">
<input type=text size=40 name="Eingabe">
<input type=submit value="Absenden">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion Methode() aufgerufen.

Innerhalb der Funktion Methode() wird ermittelt, ob in der action-Angabe des Formulars das Zeichen @ vorkommt, das eine E-Mail-Adresse verrät. Wenn ja, wird die Versandmethode auf post gesetzt, ansonsten auf get. Die Funktion Methode() gibt true zurück, denn der aufrufende Event-Handler onSubmit im einleitenden <form>-Tag erwartet einen solchen Rückgabewert. Das Formular wird nur abgeschickt, wenn der Rückgabewert true ist.

Um in einer Zeichenkette nach einem oder meherern Zeichen zu suchen wie im Beispiel mit der Methode indexOf(), lesen Sie den Abschnitt über das  string-Objekt.

 

JavaScript 1.0Netscape2.0MS IE3.0Lesen/Ändern name

Speichert den Namen eines Formulars.

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="mailto:duselbst@deine.com">
<input type=text size=40 name="Eingabe">
<input type=submit value="Absenden">
</form>
<script language="JavaScript">
 document.Testform.Eingabe.value = document.Testform.name;
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Eingabefeld. Unterhalb des Formulars steht ein Script, das in das Eingabefeld zur Kontrolle den Namen des Formulars schreibt. Im Beispiel ist das der Name Testform.

 

JavaScript 1.0Netscape2.0MS IE3.0Lesen/Ändern target

Speichert, welches Fenster im Falle eines Frame-Sets nach dem Absenden aktiv werden soll. Das kann etwa bei Frame-Fenstern oder bei separaten Zweitfenstern interessant sein. Falls ein CGI-Programm HTML-Code an den Browser zurückschickt, zum Beispiel mit einem "Danke für das Absenden des Formulars", dann erscheint die Ausgabe in dem Fenster mit dem angegebenen Namen.

Beispiel:

<html><head><title>Test</title>
<script language="JavaScript">
function Ziel()
{
 document.Testform.target = "unten";
 return true;
}
</script>
</head><body>
<form name="Testform" action="/cgi-bin/testform.pl" 
onSubmit="return Ziel()">
<input type=text size=40 name="Eingabe">
<input type=submit value="Absenden">
</form>
</body></html>

Erläuterung:

Das Beispiel nimmt an, daß sich die Datei mit dem Formular in einem Frame-Set befindet, in dem es noch ein anderes Frame-Fenster gibt, und zwar eines mit dem Namen unten. Die Beispieldatei enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion Ziel() aufgerufen.

Innerhalb der Funktion Ziel() wird wird bestimmt, daß die HTML-Code-Rückgabe des CGI-Programms testform.pl in dem Frame-Fenster unten erfolgt.

 

JavaScript 1.2Netscape4.0 handleEvent()

Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie  handleEvent() beim window-Objekt (nähere Informationen siehe dort).

 

JavaScript 1.1Netscape3.0MS IE4.0 reset()

Löscht alle Eingaben in einem Formular und hat die gleiche Wirkung wie ein Button, der in HTML mit type=reset definiert wurde.

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Testform">
<input type=text size=40 name="Feld1"><br>
<input type=text size=40 name="Feld2"><br>
</form>
<a href="javascript:document.Testform.reset()">Formular leeren</a>
</body></html>

Erläuterung:

Das Beispiel enhält ein Formular mit zwei Eingabefeldern. Unterhalb des Formulars steht ein Verweis. Beim Anklicken des Verweises weren alle Eingaben in dem Formular gelöscht.

 

JavaScript 1.0Netscape2.0MS IE3.0 submit()

Sendet ein Formular ab und hat die gleiche Wirkung wie ein Button, der in HTML mit type=submit definiert wurde. Die JavaScript-Methode funktioniert seit Netscape 3.0 jedoch nur noch, wenn das Formular von einem Programm weiterverarbeitet wird, d.h. wenn im einleitenden <form>-Tag bei der Angabe action= zum Beispiel ein CGI-Programm aufgerufen wird. Wenn bei action= eine E-Mail-Adresse oder eine Newsgroup angegeben wird, funktioniert sie nicht.

Beispiel:

<html><head><title>Test</title>
</head><body>
<form name="Testform action="/cgi-bin/auswert.pl" method=get>
<input type=text size=40 name="Feld1"><br>
<input type=text size=40 name="Feld2"><br>
</form>
<script language="JavaScript">
 function AbGehts()
 {
  document.Testform.submit();
 }
 window.setTimeout("AbGehts()",60000);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit Eingabefeldern. Unterhalb davon steht ein JavaScript. Darin wird mit der setTimeout()-Methode ein Countdown gestartet. Nach 60000 Millisekunden, also nach einer Minute, wird die Funktion AbGehts() aufgerufen. Diese schickt das Formular mit submit() ab.

weiter: elements
zurück: applets
 

SELFHTML/Quickbar  JavaScript  Objekt-Referenz

© 1998  Stefan Münz, muenz@csi.com