Javascript Event Handler onChange
Wählen Sie Ihre Fahrradmarke und geben Sie das Modell ein.
Script:
<script language="javascript" type="text/javascript">
function checkRadio(inputId){
for(i=1; i<=3; i++)
{
if(i != inputId){
document.getElementById("text"+String(i)).setAttribute('disabled', 'disabled');
document.getElementById("text"+String(i)).value = '';
}else{
document.getElementById("text"+String(inputId)).removeAttribute('disabled');
}
}
}
</script>
HTML Markup:
<form>
<p>
<input type="radio" name="farbe" id="x" value="x" onChange="checkRadio(1)" checked>
<label for="text1">Brompton:</label>
<input type="text" name="brompton" id="text1">
</p>
<p>
<input type="radio" name="farbe" id="y" value="y" onChange="checkRadio(2)">
<label for="text2">Salsa:</label>
<input type="text" name="salsa" id="text2" disabled>
</p>
<p>
<input type="radio" name="farbe" id="z" value="z" onChange="checkRadio(3)">
<label for="text3">Trek:</label>
<input type="text" name="trek" id="text3" disabled>
</p>
</form>
Erklärung:
Event Handler machen in erster Linien in Elementen Sinn, die von ihrer Bedeutung her schon interaktiv sind, wie beispielsweise Formularelemente, Audio- und Videosteuerung, Links etc.
So gibt es beispielsweise für Audio und Videosteuerung Events, die speziell dort gebraucht werden. Siehe w3schools oder ein paar Beispiele von mir.
Auch für Formularelemente gibt es Eventhandler wie onChange, die ausgelöst werden, wenn ein Formularelement seinen Status ändert. Dieser Event- Handler kommt hier auf allen Radiobuttons zum Einsatz. Aus dem Parameter der Funktion wird der id-Name eines input Feldes zusammengesetzt.
Das komplizierte oder interessante ist hier die for-Schleife und die if -Struktur. Die for-Schleife läuft sooft wie es input Felder gibt. Alle Felder werden deaktivert, bis auf das, dessen Zahl dem Parameter entspricht. Das übergebene Feld wird aktiviert alle anderen deaktiviert. Das geschieht durch die Attributzuweisung setAttribute und removeAttribute.
