Formulare/Eingaben mit JavaScript auswerten
Im SELFHTML-Forum wird relativ häufig gefragt, wie man den eingegebenen Wert eines Formularelementes auslesen kann. Dieser Artikel zeigt die dazu notwendigen Zusammenhänge auf.
Siehe auch: HTML/Tutorials/Formulare
Inhaltsverzeichnis
value-Eigenschaft
Jedes JavaScript-Objekt hinter einem Eingabe-Element kennt die value
-Eigenschaft. Sie enthält den aktuellen Wert. Beschreibt man sie mit einem anderen Wert, hat man den eingegebenen Inhalt verändert.
// neues <input> erzeugen
let myInput = document.createElement("input");
// Wert hineinschreiben (durch simple Wertzuweisung)
myInput.value = "Hallo Welt!";
// Wert auslesen und in der Konsole ausgeben
console.log(myInput.value); // Hallo Welt!
value
-Eigenschaft. Ebenso kann man mit der value
-Eigenschaft nicht prüfen, ob bei einer Checkbox das Häkchen gesetzt ist, oder nicht. Dafür benötigt man die checked
-Eigenschaft.Wie kommt man an das Element heran?
Um den eingegebenen Inhalt eines Elements auszuwerten, muss man das Element mit JavaScript "irgendwie anfassen" können, also eine Referenz darauf erhalten. Entweder man selektiert ein Element über die Struktur des DOM, oder man spricht es über die Liste an Elementen des übergeordneten Formulars an.
document.forms
Das Objekt document.forms gibt einer HTMLCollection aller form-Elemente eines Dokument zurück. Mit dem Unterobjekt elements
haben Sie Zugriff auf Elemente eines Formulars.
let form = document.forms[0]
gibt das erste (die Zählung beginnt bei 0) Formular eines Dokuments zurück. Bei der Erweiterung des HTML-Dokuments um weitere Formulare ist diese Methode jedoch fehleranfällig.
Sicherer ist das Ansprechen über den Namen des Formulars:
let form = document.forms.theform
let form = document.forms['theform']
Der untere Fall ist übersichtlicher, da hier der Name klar als Variable gekennzeichnet wird.
let form = document.forms['theform'].elements.['breite']
Information: Ansprechen über IDs
let breite = theForm.breite.value;
Die einzelnen Eingabe- und Bedienelemente können nun über die elements-Eigenschaften angesprochen werden. Sie liefern HTMLCollections, auf denen diese Zugriffe definiert sind und die keine Kollisionen verursachen. Durch die Verwendung von document.forms
schließen Sie aus, irrtümlich mit einer globalen oder lokalen Variablen zu kollidieren.
Hauptartikel: JavaScript/DOM/Document/forms
DOM-Methoden
Prinzipiell können Eingabe-Elemente auch außerhalb von Formularen in einem Dokument vorkommen, jedoch können ihre Inhalte dann nicht mit den üblichen Mitteln vom Browser selbst an den Server versandt werden, was ja der Sinn hinter Formularen ist. Es gibt Fälle, wie beim Auslösen clientseitiger Aktionen, in denen man das auch nicht benötigt. Man kann in solchen Fällen dann nur über das DOM auf die Eingabe-Elemente zugreifen.
let input = document.getElementById['myinput'];
Anwendungsbeispiel: Währungsumrechner
Das Beispiel verwendet kein umgebendes Formular, da hier keine Daten versendet, sondern live im Browser berechnet und angezeigt werden sollen. Es werden die aktuellen Werte der input
-Elemente mittels ihrer value
-Eigenschaft ausgelesen und verändert.
<label>
Wechselkurs Euro → Dollar
<input name="rate" type="number" step="0.01" value="1.11" />
</label>
<label>
Betrag in Euro
<input name="a" type="number" step="0.01" />
</label>
<label>
Betrag in US-Dollar
<input name="b" type="number" step="0.01" />
</label>
var r = parseFloat(rate.value);
if (r !== 0) {
switch (event.target) {
case a:
case rate:
b.value = (parseFloat(a.value) * r).toFixed(2);
break;
case b:
a.value = (parseFloat(b.value) / r).toFixed(2);
break;
}
}
if
-Statement, ob überhaupt ein von null abweichender Wechselkurs eingegeben ist, damit bei den Berechnungen eine Division durch null vermieden wird, welche zu einem Abbruch der Programmausführung führen würde.Wenn der Inhalt eines Eingabe-Elements geändert wurde, löst das ein Ereignis vom Typ change
aus. Der hier dargestellte Code prüft nun, von welchem Eingabefeld dieses Ereignis ausgegangen ist, um daraufhin die entsprechenden anderen Felder zu aktualisieren.
Schieberegler
Die Eingabe von Zahlen ist einerseits mit input type="number"
möglich, wobei die Pfeile auf der rechten Seite nur bedingt mit CSS gestaltet werden können.
Daneben können Sie mit input type="range"
einen Slider (Schieberegler) verwenden . Dieser hat allerdings den Nachteil, dass der Benutzer keine direkte Rückmeldung über die eingegebenen Werte erhält. Dies können Sie mit JavaScript aber schnell nachrüsten:
<h2>Ergebnisausgabe eines Schiebereglers</h2>
<label for="volume">Lautstärke:</label>
<input type="range" id="volume" value="50">
<output id="output" for="volume">50</output>
function ausgeben(ev) {
document.getElementById('output').value = ev.target.value;
}
document.getElementById('volume').addEventListener('input', ausgeben);
- Der IE verwendet das
input
-Event nicht korrekt und - stellt den Wert (
value
) desoutput
-Elements nicht dar.
Einfacher als das wäre wohl
<output hidden></output>
und das hidden-Attribut per JavaScript entfernen.- ↑ Whatwg: HTML Living Standard §7.3.3
number
.