JavaScript - Praxistutorial 2 - Formularelemente deaktivieren
1. Die Abschnitte
- Überblick
- Vorbereitung
- Formularinhalte überprüfen
- Diverse Feinarbeiten
- Formularelemente deaktivieren
- Formularelemente abfragen
- Formularelemente manipulieren
2. Das große Aussieben
Bei der "Super Global Hyper Meganet Ltd." ist man der Meinung, dass man mit einem bestimmten Schulabschluss nur eine bestimmte Ausbildung machen kann. Vom Prinzip her stimmt das folgende Beispiel zwar nicht, aber das soll uns egal sein. Hier geht es ja um JavaScript.
Zunächst wenden wir uns den radio
-"Buttons" zu. Wenn man auf einen von denen klickt, so sollen entsprechend der Vorgaben
einzelne Checkboxen unter dem Punkt "Ausbildung" deaktiviert werden. Dazu bekommt nun jedes radio
-Element den folgenden
Event-Handler verpasst.
onclick="setPreferences(this.value);"
Erläuterung
Das Zauberwörtchen this
habt ihr ja schon im vorherigen Abschnitt kennen gelernt. In diesem Fall übergeben wir der Funktion
setPreferences
einfach den Wert des angeklickten radio
-Buttons (this.value
);
3. Die Funktion setPreferences
Ein "Hilfs-Array"
Um nun eine Unterscheidung nach Schulabschluss treffen zu können, benötigen wir dafür auch die entsprechenden Informationen. Dabei legen wir mal völlig willkürlich fest, dass ein Hauptschüler nur eine Ausbildung zum MATA/MATSE machen kann, eine Realschüler zusätzlich den FIAE und BA Inf. erreichen kann und Gymnasiasten alles dürfen (ob sie es können, sei mal dahingestellt)
function setPreferences(pref)
{
var degree = new Array ();
degree['Hauptschule'] = new Array ();
degree['Hauptschule'][0] = 'MATA';
degree['Hauptschule'][1] = 'MATSE';
degree['Realschule'] = new Array ();
degree['Realschule'][0] = 'MATA';
degree['Realschule'][1] = 'MATSE';
degree['Realschule'][2] = 'FIAE';
degree['Realschule'][3] = 'BA Inf.';
degree['Gymnasium'] = new Array ();
degree['Gymnasium'][0] = 'MATA';
degree['Gymnasium'][1] = 'MATSE';
degree['Gymnasium'][2] = 'FIAE';
degree['Gymnasium'][3] = 'BA Inf.';
degree['Gymnasium'][4] = 'MA Inf.';
degree['Gymnasium'][5] = 'Dipl. Inf.';
}
Die Schleife
function setPreferences(pref)
{
...
for (var i = 0; i < fields.length; i++)
{
...
}
}
Erläuterung
Wer sich jetzt fragt, was das fields
zu bedeuten hat, dem sei gesagt, dass wir diese Variable ja schon bei der
Vorbereitung festgelegt haben (fields = document.getElementsByName('Ausbildung[]');
). Wir
haben also ein Array mit den Verweisen auf alle Checkboxen unter dem Punkt "Ausbildung".
Deaktivieren
for (var i = 0; i < fields.length; i++)
{
if (!in_array (fields[i].value, degree[pref]))
{
fields[i].disabled = true;
if (true == fields[i].checked)
{
fields[i].checked = false;
}
}
}
Erläuterung
Mit unserer "Hilfsfunktion" in_array
überprüfen wir nun, ob sich der Wert der jeweiligen Checkbox auch im entsprechenden
"Unterarray" befindet, also zum Beispiel degree['Hauptschule']
. Wenn dem also nicht so ist und wir ein false
zurück geliefert bekommen, so wird die jeweilige Checkbox mit fields[i].disabled = true;
deaktiviert. Und sollte sie schon
markiert sein (if (true == fields[i].checked)
), so wird auch noch das Attribut checked
entfernt
(fields[i].checked = false;
).
Reaktivieren
if (!in_array (fields[i].value, degree[pref]))
{
...
}
else
{
fields[i].disabled = false;
}
Erläuterung
Klickt nun jemand irrtümlicherweise zuerst auf "Realschule" und dann auf "Gymnasium", so bleibt die Deaktivierung bestehen. Um das zu
vermeiden, entfernen wir die "Sperre" mittels fields[i].disabled = false;
.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt