HTML-Formulare mit Javascript lesen

HTML-Formulare mit Javascript lesen

Hier wird vorgestellt, wie man mit → Javascript-Funktionen auf Formular-Elemente zugreift, d.h. wie man die von den AnwenderInnen eingegebenen Daten mit Programmen lesen kann.

Javascript-Programme sind von einem Webserver und dessen Resourcen unabhängig: Sie funktionieren am eigenen Arbeits-PC ebenso wie im Intranet oder am Server jedes beliebigen Internet-Providers.



Formular

HTML-Quelltext des Formulars (vereinfacht):
<form id="f1" name="f1" action="javascript:form_action()">

<input id="txt1" name="txt1" type="text"/> Text-Eingabe<br/>

SchiebeRegler:
<input id="rng1" name="rng1" type="range"/>

Checkbox-Elemente:<br/>
<input id="cb1" name="cb1" type="checkbox"/>
<input id="cb2" name="cb2" type="checkbox"/>
<input id="cb3" name="cb3" type="checkbox"/>
<br/>

Radio-Elemente:<br/>
<input id="rb11" name="rb1" type="radio" value="Anna"/>
<input id="rb12" name="rb1" type="radio" value="Bert"/>
<input id="rb13" name="rb1" type="radio" value="Christa"/>
<br/>

Andere Gruppe von Radio-Elementen:<br/>
<input id="rb21" name="rb2" type="radio" value="ABC"/>
<input id="rb22" name="rb2" type="radio" value="123"/>
<input id="rb23" name="rb2" type="radio" value="xyz"/>

</form>

<button onclick="document.f1.submit()">
Absenden
</button>


Absenden:   submit()-Methode


Javascript-Funktion als Ereignis-Handler

• Wenn als Wert des action-Attributs ein Javascript-Programm angegeben ist, dann wird dieses beim Absenden gestartet - z.B. mit
<form action="javascript:form_action()">
die Funktion form_action() dieser Webseite.

• Das Ziel-(Javascript)-Programm wird am eigenen Arbeits-PC ausgeführt. Damit fällt die 2malige Übertragungs-Zeit weg, welche die Verarbeitungs-Zeit meist um Größenordnungen übersteigt. Außerdem wird der Server entlastet.

• Das Javascript-Programm ist normalerweise bereits in der aktuellen Webseite enthalten. Es muss die aktuellen Formular-Daten lesen, verarbeiten und die gewünschten Ergebnisse (z.B. einer Berechnung) Live auf der gleichen Webseite anzeigen. Die Webseite wird nur 1mal geladen und kann danach beliebig oft zur interaktiven Lösung der jeweiliogen Aufgabe verwendet werden.

Diese Methode ist besonders effizient - insbesondere dann, wenn das Formular mit geänderten Daten mehrmals hintereinander 'abgesendet' wird.

• Javascript ist in einfacher Form nur dann verwendbar, wenn zur Lösung der Aufgabe keine anderen als die jeweiligen Formular-Daten erforderlich sind (Beispiel: Rechteck-Berechnung).

• Wenn eine Aufgabe zusätzliche Resourcen erfordert (z.B. eine Datenbank auf einem entfernten Server), dann verwendet man auch dafür besser Javascript-Programme und fordert die Server-Daten Live mit AJAX-Methoden an.


• Eine Javascript-Anweisung kann die submit()-Methode starten, z.B. durch Klick auf ein Button-Element:
<button onclick="document.f1.submit()">
</button>
oder auf einen Hyperlink:
<a href="javascript:document.f1.submit()"> </a>
Button-Elemente oder Hyperlinks können sich an beliebigen Stellen der Webseite - auch außerhalb des Formulars - befinden.



• Die Funktion reagiert auf die Taste 'Absenden' unter dem ↑ Demo-Beispiel dieser Seite. Sie zeigt mit Methode alert() lediglich ein Meldungs-Fenster an.

Der mehrzeilige Text wird schrittweise in der Variablen txt zusammengestellt. Mit \n (NewLine) wird ein Zeilen-Umbruch (Neue Zeile) eingefügt.
Sonderzeichen (Umlaute) werden mit \u und ihrer 4stelligen hexadezimalen → Unicode-Nummer angegeben.

Formular-Ereignisse (events)


Ab HTML-Version 5 kann auch das <form>-Element ein onchange-Attribut enthalten. Es reagiert damit auf die Änderung jedes beliebigen darin enthaltenen <input>-Elements.

Dieses Ereignis ist ideal geeignet, um die Daten aller <input>-Elemente eines Formulars zu validieren.

Wenn die Prüfung erfolgreich war, kann man das Formular mit einer Javascript-Anweisung absenden - Damit wird ein eigenes Element (Button) zum Absenden überflüssig.

Ab HTML 5 ist auch das Ereignis oninput verfügbar: Man kann es verwenden, um bereits während der Bedienung eines ↓ SchiebeReglers dessen Wert zu lesen.



Nachteil: Die 'Werte' dieser Elemente werden beim Absenden des Formulars mit-gesendet, obwohl das sinnlos und beim Empfänger störend ist.
Außerdem versucht man, die spezialisierten Elemente alter HTML-Versionen schrittweise durch allgemein verwendbare zu ersetzen.


Beispiel: Mit diesem Button wird das angegebene Formular abgesendet:
<button onclick="document.f1.submit()">
Absenden
</button>
Der Button sollte sich außerhalb des <form>-Elements befinden, da ansonsten sein Text beim Absenden des Formulars mit-gesendet wird.


Mit Buttons kann man jede beliebige mit Javascript programmierbare Funktion auslösen, hier z.B. diese Minimal-Funktion
function klick() {
alert('Der Button wurde angeklickt.')
}

Text-Elemente mit Javascript lesen


Sie können die dazu programmierte Funktion mit Klick auf ihren Namen  lesen_und_melden()  starten.


• Ein Wert rechts vom = Zeichen wird gelesen (hier die Eigenschaft value).
Ein Wert links vom = Zeichen wird geschrieben (hier der Wert der Variablen usertext).

• Normalerweise wird der Text weiter verarbeitet: Man kann ihn z.B. mit den Methoden parseInt(), parseFloat() in Zahlen umwandeln, oder mit 'Regulären Ausdrücken' zerlegen und analysieren (erfordert fortgeschrittene Kenntnisse).

• Hier wird lediglich ein Meldungs-Text angezeigt:
In der Variablen txt wird der Ausgabe-Text zusammengestellt: Zuerst wird ein konstanter Text (in "") zugewiesen. Danach folgt mit \n eine neue Zeile mit dem Eingabe-Text, zuletzt eine neue Zeile mit der Text-Länge (ermittelt mit der Eigenschaft length).

• Die Methode alert() erzeugt ein Meldungs-Fenster und gibt darin den als Argument in () enthaltenen Text aus.

SchiebeRegler mit Javascript lesen


SchiebeRegler sind intuitiv bedienbar und daher für AnwenderInnen besser verständlich und einfacher bedienbar als die digitale Eingabe mit Ziffern-Tasten.

Die Programmierung wird vereinfacht, weil die aufwändige → Validierung (Säuberung und Prüfung der Eingabe-Daten) wegfällt:
Die AnwenderInnen können nur die vorgesehenen ZahlenWerte eingeben.


• Ein Wert rechts vom = Zeichen wird gelesen (hier die Eigenschaft value). Ein Wert links vom = Zeichen wird geschrieben (hier der Wert der Variablen usertext).

• Die Methode alert() erzeugt ein Meldungs-Fenster und gibt darin den als Argument in () enthaltenen Text aus.

• Der gelesene Wert ist ein Text (String) !
Er wird zur weiteren Verwendung meist in eine Zahl umgewandelt: Die Methode parseInt() wandelt in eine Ganze Zahl um, die Methode parseFloat() in eine Gleitkomma-Zahl:
var zahl = parseInt(document.f1.rng1.value);



Beispiel: Regler von -10 bis +10 in Schritten von 1
<input type="range" min="-10" max="10"/>

Regler von 0 bis 2*Pi (Kreiszahl) in Schritten von 0.1
Verwenden sie für Gleitkomma-Zahlen immer einen Dezimal-Punkt, keinen Beistrich !
<input type="range" max="6.283" step="0.1"/>



Man löst die Aufgabe meist mit einem kleinen Javascript-Programm:
Der Regler muss ein onchange-Attribut und / oder ein oninput-Attribut erhalten.
Eine Javascript-Funktion muss auf die Ereignisse (Events) onchange und oninput reagieren und den aktuellen Wert des Reglers lesen.
Die Funktion muss den gelesenen Wert auf der Webseite anzeigen, meist in einem dazu vorgesehenen <span>-Element


Alleinstehende Lösung: Die komplette Javascript-Anweisung ist als Wert des oninput-Attributs eingetragen.:
<form name="fr">
<input name="rng" type="range"
oninput="document.getElementById('rngv').firstChild.nodeValue=document.fr.rng.value"/>
<span id="rngv">50</span>
</form>


Dabei muss man beachten:

Jeder Regler und jedes dazu gehörende <span>-Element müssen eindeutige name- bzw. id-Attribute haben.
Die verwendeten Namen (rot) müssen genau zueinander passen.


Javascript-Quelltext der Event-Handler-Funktion:
function range_handler() {
var rv = document.f1.rng1.value;
var n = document.getElementById('rgn1v');
n.firstChild.nodeValue = rv;
}

Das Ereignis oninput tritt bereits während der Änderung des Reglers auf, das Ereignis onchange erst nach Abschluss. Man programmiert beide Ereignisse, da manche Browser das oninput-Ereignis noch nicht unterstützen.
Weitere Tricks zur Anwendung von → SchiebeReglern

Checkbox-Elemente mit Javascript lesen



Diese Funktion liest die Eigenschaft checked (markiert) eines einzelnen Checkbox-Elements, welches durch Angabe seiner Objekt-Hierarchie angegeben wird:
document.f1.cb1

• Nach dem Lesen von Checkbox-Elementen folgen typisch bedingte Verzweigungen des Programms = unterschiedliche Maßnahmen, je nachdem, ob das Kästchen markiert ist oder nicht.

  Live-Beispiel mit einem HTML <button>-Element.


  zählt die Anzahl der markierten Kästchen.

  verknüpft die gelesenen Daten zu einer logischen Aussage.

• Der Text aller verwendeten Javascript Funktionen ist im Quelltext dieser Webseite enthalten.

Radio-Elemente mit Javascript lesen

  Live-Beispiel mit einem HTML <button>-Element.

• In der Variablen rnr wird Nummer des markierten Elements analysiert. Für den Fall, dass keines der Elemente markiert ist, wird der Anfangswert rnr=-1 gesetzt.

• Danach wird die Eigenschaft checked (markiert) für jedes einzelne Element der Gruppe von [0] bis [2] gelesen. Wenn das markierte Element gefunden wurde, dann wird sein Index an die Variable rnr zugewiesen.

• In der Variablen txt wird schrittweise der Ausgabe-Text zusammengestellt und zuletzt mit Methode alert() in einem Meldungs-Fenster angezeigt.

Sonderfälle:
• Im ↑ oben angegebenen Beispiel ist anfangs keines der Elemente markiert. Mit dem Attribut checked wird ein Element schon beim Laden der Webseite markiert:
<input id="rb11" name="rb1" type="radio" checked="checked"/>
Es liegt in der Verantwortung des Entwicklers, aus jeder Gruppe nur 1 Radio-Element zu markieren.
• Auch mit Javascript ist es möglich, die Eigenschaft checked jedes einzelnen Elements zu ändern: Durch unsaubere Programmierung kann man auch mehrere Radio-Elemente einer Gruppe markieren, oder alle Markierungen löschen.


Die Funktion radiovalue_read() ist eine allgemein formulierte Variante. In diesem Fall genügt eine einzige Funktion, um die Werte beliebiger Gruppen zu lesen, z.B.
 

• Der Text aller verwendeten Javascript Funktionen ist im Quelltext dieser Webseite enthalten.

Neue Eingabe-Elemente

Seit → HTML-Version 5 sind einige neue Typen von <input>-Elementen verfügbar, z.B.:
HTML-Quelltext
Live-Beispiel
Live-Ergebnis
Erklärung
<input type="color"/>
#00FF00
Auswahl einer → Farbe
<input type="number" min="1" max="9"/>
5
Auswahl einer Zahl
<input type="range"/>
50
Auswahl einer Zahl mit ↑ SchiebeRegler
Weitere Elemente werden hier nicht vorgestellt, weil sie von gängigen Browsern zwar angezeigt werden, sich jedoch meist genauso wie der Typ text verhalten.

Man verwendet für Mail, Suche, Telefon oder Web-Adresse (URL) vorläufig besser Elemente der Typs text mit passender → Validierung.
Für Jahr, Monat, Woche oder Tag kann man HTML <select>-Elemente oder <input>-Elemente des Typs number verwenden.


SelfHTML (Formulare)
W3Schools (HTML-forms, HTML-<input>, HTML-<input>-attributes

Formular-Daten schreiben



Hinweise & Links