JavaScript: Form Check Drop Down Liste


HTML Code:
<form action="auswertung.php" method="post" name="frmEingabe"><br>
Hardware:<br>
<br>
<select name="Hardware" onchange="auswahlliste()">
<option>Computer</option>
<option>Drucker</option>
<option>Scanner</option>
</select>
<br>
<input type="submit" value="Speichern"><br>
</form>
<div id="idDrucker" style="display:none"><br><br>Rette die Natur und drucke nichts mehr aus.<br>
</div>

Wird der HTML Code ausgeführt, erscheint ein einfaches Formular mit einer Auswahlliste. Die Auswahlliste enthält drei Einträge (Computer, Drucker, Scanner).

Formular

Sobald die Auswahlliste geändert wird (onchange="auswahlliste()") wird der ausgewählte Eintrag in einem Popup Fenster angezeigt.

JavaScript Code:
function auswahlliste()
{
index = document.frmEingabe.Hardware.selectedIndex; // 0=erster Eintrag
alert("Index=" + index + "\n" + "Wert=" + document.frmEingabe.Hardware.options[index].text);
if (index == 1) { document.getElementById("idDrucker").style.display="block"; }
}

Wird in der Auswahlliste der Drucker ausgewählt (zweiter Eintrag, index=1), dann wird nach dem Schließen des Popup Fensters eine Zeile unterhalb des Formulars eingeblendet, die beim Aufruf ausgeblendet ist <div id="idDrucker" style="display:none">...</div><.


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