JavaScript: Form Check Checkboxen


HTML Code:
<form action="auswertung.php" method="post" onsubmit="return validateForm()" name="frmEingabe"><br>
Hardware:<br>
<br>
<input type="checkbox" name="Computer" value="Computer"> Computer<br>
<input type="checkbox" name="Drucker" value="Drucker"> Drucker<br>
<input type="checkbox" name="Scanner" value="Scanner"> Scanner<br>
<br>
<input type="submit" value="Speichern"><br>
</form>

Wird der HTML Code ausgeführt, erscheint ein einfaches Formular mit drei Checkboxen.

Formular

Beim Klick auf Speichern wird die JavaScript Funktion validateForm() aufgerufen.

JavaScript Code:
function validateForm()
{
if (document.frmEingabe.Computer.checked == true) { alert("Computer ausgewählt"); }
if (document.frmEingabe.Drucker.checked == true) { alert("Drucker ausgewählt"); }
if (document.frmEingabe.Scanner.checked == true) { alert("Scanner ausgewählt"); }
}

Jede Checkbox wird individuell ausgewertet. Ist ein Häkchen gesetzt, wird ein Popup Fenster mit einer Info geöffnet.


In obigem Beispiel besitzt jede Checkbox einen eigenen Namen. Es ist alternativ möglich, den Checkboxen denselben Namen zu geben:

<form action="auswertung.php" method="post" onsubmit="return validateForm()" name="frmEingabe"><br>
Hardware:<br>
<br>
<input type="checkbox" name="Hardware" value="Computer"> Computer<br>
<input type="checkbox" name="Hardware" value="Drucker"> Drucker<br>
<input type="checkbox" name="Hardware" value="Scanner"> Scanner<br>
<br>
<input type="submit" value="Speichern"><br>
</form>

In diesem Fall können die Checkboxen über ein Array ausgewertet werden.

JavaScript Code:
function validateForm()
{
for (i = 0; i < document.frmEingabe.Hardware.length; i++)
{
if (document.frmEingabe.Hardware[i].checked == true)
{
alert(i + ": " + document.frmEingabe.Hardware[i].value);
}
}
}

Alle Checkboxen mit dem Namen Hardware werden überprüft. Ist ein Häkchen gesetzt, wird ein Popup Fenster mit einer Info geöffnet.
Hinweis:
Die JavaScript Funktion wird üblicherweise im Header Bereich (<head> ... </head>) innerhalb des script Tags (<script> ... </script>) eingebettet.