Hauptmenü

Untermenü

JavaScript - Praxistutorial 2 - Formularelemente abfragen

1. Die Abschnitte

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