CSS, HTML und Javascript mit {stil}

Rund um input – Werte auslesen

input-Felder mit Javascript prüfen und validieren

Bevor Formulareingaben an die Anwendung auf dem Server geschickt werden, prüft Javascript die Eingaben, um das Hin- und Her zwischen Client und Server zu reduzieren.

Der aktuelle Wert von Eingabefeldern – input type=text, type=checkbox, type=radio und textarea – läßt sich am einfachsten mit querySelector bzw. querySelectorAll auslesen.

Eingabefelder müssen nicht unbedingt in form-Elementen sitzen, sondern können an jeder Stelle einer Seite verwendet werden. Allerdings kann nur ein form-tag die eingegebenen Werte an eine Anwendung auf dem Server schicken.

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

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">

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

input type="checkbox"

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

Farbe wählen

<input type="checkbox" name="farben" value="Rot"> Rot<br> 
<input type="checkbox" name="farben" value="Grün"> Grün<br> 
…
var checkboxes = document.querySelectorAll('input[name="farben"]');
var num = checkboxes.length;

for (var i=0; i<num; i++) {
      if (checkboxes[i].checked === true) {
      checkitem += checkboxes[i].value + " ";
   }
}	

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>
		
var 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>

var 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 () {
   var 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>

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

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

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

HTML input input Dein Name Spin Schlüssel