JavaScript/Tutorials/Formulareingaben mit JavaScript auswerten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
Grundkenntnisse in
● HTML
● CSS
● JavaScript

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.

value-Eigenschaft[Bearbeiten]

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.

Wert lesen und ändern
// 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!
Beachten Sie: Bei Auswahllisten lässt sich der eingegebene Wert, also die ausgewählte Option, so nicht ändern. Auch bei mehrzeiligen Eingabefeldern geht das nicht über die 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?[Bearbeiten]

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.

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, in denen man das auch nicht benötigt. Man kann in solchen Fällen dann nur über das DOM auf die Eingabe-Elemente zugreifen.

Anwendungsbeispiel: Währungsumrechner[Bearbeiten]

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.

Währungsumrechner ansehen …
<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>
Damit mehrere Umrechner auf einer Seite möglich sind, wird ein generischer Name für die Eingabefelder verwendet. Da es sich um Zahlenwerte handelt, sind sie vom Typ number.
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;
  }
}
Da das Dividieren durch null nicht möglich ist, prüft das 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.

Wird das erste Feld mit dem Wechselkurs verändert (case rate) oder wird der Ausgangswert verändert (case a), wird der Wert des Ergebnisfeldes neu berechnet. Bei Änderung des Ergebniswertes (case b) wird der Ausgangswert angepasst.