JavaScript - Praxistutorial 2 - Formularelemente abfragen
1. Die Abschnitte
- Überblick
- Vorbereitung
- Formularinhalte überprüfen
- Diverse Feinarbeiten
- Formularelemente deaktivieren
- Formularelemente abfragen
- Formularelemente manipulieren
2. Kohle, Pinunzen, Moneten
Jetzt geht es mal wieder ums liebe Geld. Und zwar wollen wir je nach Ausbildung eine Obergrenze beim Gehaltswunsch festlegen. Dazu legen wir erst mal auf jede(!) Checkbox unter diesem Punkt einen entsprechenden Event-Handler.
<input type="checkbox" ... onclick="getGradution();" />
3. Die Ausbildung überprüfen
Zunächst muss man sich darüber im Klaren sein, dass bei Checkboxen mehrere ausgewählt werden können, auch wenn sie den gleichen Namen haben. Das bedeutet in diesem Fall, dass wir immer alle überprüfen möchten. Es kann ja jemand sowohl eine Ausbildung zum MATA als auch ein abgeschlossenes Studium haben. So muss also die höchstmögliche Qualifikation gewertet werden.
Die Funktion getGradution
function getGradution ()
{
for (var i = fields.length - 1; i >= 0 ; i--)
{
if (true == fields[i].checked)
{
var graduation = fields[i].value;
break;
}
}
}
Erläuterung
Da wir, wie schon gesagt, nur die "höchste" Ausbildung benötigen, durchlaufen wir unser bereits bekanntes Array von hinten nach vorne
(for (var i = fields.length - 1; i >= 0 ; i--)
). Wir fangen also mit dem Dipl. Inf an. Sobald nur eine Checkbox markiert
wurde (if (true == fields[i].checked))
), schreiben wir deren Wert in die Variable graduation
und beenden die
Schleife mit break
.
4. Sauberes Programmieren
Da es bei Checkboxen passieren kann, dass man erst eine markiert und dann selbiges wieder entfernt, bauen wir eine entsprechende Bedingung ein. Somit verhindern wir, dass der restliche Code auch dann ausgeführt wird, wenn keine der Checkboxen aktiviert ist.
function getGradution ()
{
...
if (graduation)
{
...
}
}
5. Und noch ein "Hilfs-Array"
Hier gehen wir genau so vor wie im vorherigen Abschnitt. Alle Informationen zu den möglichen Gehältern bei einer entsprechenden Ausbildung legen wir in dem folgenden Array fest.
if (graduation)
{
var salary = new Array();
salary['MATA'] = new Array (2500,3000);
salary['MATSE'] = new Array (2500,3000);
salary['FIAE'] = new Array (2500,3000,3500,4000);
salary['BA Inf.'] = new Array (2500,3000,3500,4000);
salary['MA Inf.'] = new Array (2500,3000,3500,4000,4500,5000);
salary['Dipl. Inf.'] = new Array (2500,3000,3500,4000,4500,5000);
}
6. Gehalt und Ausbildung
Nun wollen wir überprüfen, ob unser Kandidat bereits einen Gehaltswunsch angegeben hat, bevor er/sie uns seine Ausbildung kund tut. Das ist zugegebenermaßen hier etwas seltsam, da wir den Gehaltswunsch ja als Pflichtfeld festgelegt haben, die Ausbildung aber nicht. Sei's drum. Hier geht es um JavaScript und nicht um logisch aufgebaute Bewerbungsformulare.
if (graduation)
{
...
var chosen = form.Gehaltswunsch.selectedIndex;
var wanted = form.Gehaltswunsch.options[chosen].value;
setSalary(wanted, salary[graduation]);
}
Erläuterung
Die option
-Elemente eines select
-Feldes werden von JavaScript als Array behandelt, wobei Erstere einen
fortlaufend durchnummerierten Index bekommen (bei 0 beginned). Und den Index des ausgewählten Elements holen wir uns mit var
chosen = form.Gehaltswunsch.selectedIndex;
. Um nun an den Wert, also value
, zu kommen, können wir dank des vorher
ermittelten Indexes über var wanted = form.Gehaltswunsch.options[chosen].value;
darauf zugreifen.
Zuguterletzt rufen wir die Funktion setSalary
für die weitere Verarbeitung auf. Dabei übergeben wir zwei Parameter. Zuerst
den Wert des ausgewählten option
-Elements beim Gehaltswunsch und als Zweites das "Unter"-Array der angegebenen Ausbildung,
also zum Beispiel salary['FIAE']
.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt