JavaScript: Form Check Radio Buttons


HTML Code:
<form action="auswertung.php" method="post" onsubmit="return validateForm()" name="frmEingabe"><br>
Wochentag:<br>
<br>
<div id="idWochentag">
<input type="radio" name="Wochentag" value="1"> Montag<br>
<input type="radio" name="Wochentag" value="2"> Dienstag<br>
<input type="radio" name="Wochentag" value="3"> Mittwoch<br>
<input type="radio" name="Wochentag" value="4"> Donnerstag<br>
<input type="radio" name="Wochentag" value="5"> Freitag<br>
<input type="radio" name="Wochentag" value="6"> Samstag<br>
<input type="radio" name="Wochentag" value="7"> Sonntag<br>
</div>
<br>
<input type="submit" value="Speichern"><br>
</form>

Wird der HTML Code ausgeführt, erscheint ein einfaches Formular mit einer Radio Button Gruppe.

Formular

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

JavaScript Code:
function validateForm()
{
len = document.frmEingabe.Wochentag.length;
ok = 0;
for (i = 0; i < len; i++)
{
if (document.frmEingabe.Wochentag[i].checked == true) { ok = 1; }
}
if (ok == 0)
{
document.getElementById("idWochentag").style.backgroundColor = "yellow";
return false;
}
}

Zuerst wird die Anzahl der Radio Buttons ermittelt und in der Variablen len gespeichert. In einer for Schleife werden alle Radio Buttons überprüft. Ist ein Radio Button ausgewählt, wird die Variable ok auf 1 gesetzt. Ist kein Radio Button ausgewählt, bleibt die Variable ok auf 0. Der Hintergrund wird gelb und das Formular wird nicht verschickt.

Hinweis:
Die JavaScript Funktion wird üblicherweise im Header Bereich (<head> ... </head>) innerhalb des script Tags (<script> ... </script>) eingebettet.