Rund um input / select – Werte mit Javascript auslesen

input-Felder

Der aktuelle Wert von Eingabefeldern – text, checkbox, radio und textarea / select – läßt sich mit getElementsByName, aber auch mit querySelector bzw. querySelectorAll auslesen. Eingabefelder müssen auch nicht unbedingt in form-Elementen sitzen, sondern können an jeder Stelle einer Seite verwendet werden. Vor dem Eintritt von formData konnte allerdings kann nur ein form-Element (mit der URL der Anwendung im action-Attribut) die eingegebenen Werte an eine Anwendung auf dem Server schicken.

Javascript blockiert das Absenden der Formulardaten mithilfe des submit-Events. Noch direkter fällt die Kommunikation mit dem Benutzer aus, wenn die Daten direkt nach der Eingabe Feld für Feld geprüft werden.

• Formularelemente enthalten i.d.R. ein id-Attribut, so dass sie mit getElementById ausgelesen werden können.
• Für die Verarbeitung des Formulars auf dem Server wird das name-Attribut gesetzt, das mit getElementsByName erreicht wird.
• querySelector bzw. querySelectorAll erreichen Eingabe- und Auswahlfelder ebenfalls konsistent.

input type="text"

Das Verlassen eines Eingabefeldes (type="text") erzeugt ein onblur-Event.

Bei einfachen Textfeldern – input type="text" – oder Textareas liefert die Eigenschaft value die aktuelle Eingabe.

<input type="text" name="vorname" id="vorname">

let msg = document.querySelector("#vorname").value;

Der Wert von Eingabefeldern ist immer ein String, auch wenn der Benutzer bei type = "number" nur Ziffern eingibt. Formulare sind String-Verarbeitung in Reinform.

input type="checkbox"

onclick und onchange fangen Änderungen bei input type="checkbox" ab

<input type="checkbox" name="farben" value="Rot"> Rot<br> 
<input type="checkbox" name="farben" value="Grün"> Grün<br> 

document.querySelector('button#checkb').onclick = function () {
	const checkboxes = document.getElementsByName ("farben");
	let checkitem = "";
	
	checkboxes.forEach ((item) => {
		if (item.checked === true) {
			checkitem += item.value + " ";
		}
	})

	document.querySelector('.check-msg').innerHTML = checkitem;
}	

Anstelle von getElementsByName ("farben") hätte querySelectorAll mit einem CSS-Selektor alle Checkboxen erreicht:

const checkboxes = document.querySelectorAll ("input[name=Farben]");

Sowohl querySelectorAll also auch getElementsByName geben eine nodeList zurück, über die das Skript mit forEach () iterieren kann.

input type="radio"

onclick und onchange fangen Änderungen bei input type="radio" ab.

<input type="radio" name="dog" value="Dalmatiner"> Dalmatiner<br> 
<input type="radio" name="dog" value="Rottweiler"> Rottweiler<br>
		
const msg = document.querySelector('input[name="dog"]:checked').value;

Inhalt von textarea auslesen

Wenn der Benutzer ein textarea-Feld verläßt, entsteht ein onblur-Ereignis.

<textarea name="justtext" id="justtext"></textarea>

const msg = document.querySelector("#justtext").value;

select-Eingaben prüfen

Das Ändern eines select-Felds erzeugt ein onchange-Event. Muss ich ein Select überhaupt prüfen? Immerhin kann der Benutzer hier nichts Falsches eingeben.

U.U. ändert die gewählte Option allerdings die weiteren Aktionen. Bei einer Bestellung »Haferflocken« kann im Anschluss nach der Menge in Gramm gefragt werden, bei der Bestellung »Mohnbrötchen« nach der Stückzahl.

<select id="choice">
   <option>––––</option>
   <option value="Haferflocken">Haferflocken</option>
   <option value="Müsli">Müsli</option>
   …
</select>
…
document.querySelector("#choice").onchange = function () {
   let msg = document.querySelector("#choice").value;
}

Select mit mehreren Optionen

Ein Select-Feld mit mehreren Optionen kommt in freier Wildbahn selten vor. Dem Benutzer muss erklärt werden, dass er durch die Liste scrollen kann und die ALT- oder CMD-Taste gedrückt halten muss, um mehrere Optionen zu wählen. Checkboxen anstellen eines Select-Dropdown sind übersichtlicher, solange die Zahl der Optionen nicht zu groß ist.

<select multiple name="multi" id="multi">
   <option>–––––</option>
   <option value="Hecht">Hecht im Teigmantel</option>
   <option value="Forelle">Forelle Blau</option>
   <option value="Lachs">Kanadischer Lachs</option>
   <option value="Zander">Zander in Weißwein</option>
</select>

const result = [];
const options = document.querySelector("#multi") && document.querySelector("#multi").options;
let opt;

for (let i=0, iLen=options.length; i<iLen; i++) {
   opt = options[i];
   if (opt.selected) {
      result.push(opt.value || opt.text);
   }
}
let msg = result;

Das Script gibt ein Array result mit den gewählten Werten zurück.