Hauptmenü

Untermenü

JavaScript - Praxistutorial 2 - Formularelemente manipulieren

1. Die Abschnitte

2. Zurechtstutzen

Jetzt kümmern wir uns um die Leute, die die große Kohle haben wollen, ohne die dafür benötigte Qualifikation/Ausbildung zu haben. Nehmen wir jetzt also mal an, jemand möchte 5000 Euro im Monat verdienen, wählt sie im <select>-Feld aus und gibt anschließend bei der Ausbildung MATA an. Nun sagen die Verantwortlichen der "Super Global Hyper Meganet Ltd.", das ist zuviel, den stutzen wir mal auf Normalmaß zurück.


function setSalary(wantedsalary)
{
  if ('' != wanted)
  {
    if (!in_array (wantedsalary))
    {
      alert ('Wohl noch alle Tassen im Schrank?');
      form.Gehaltswunsch.selectedIndex 0;
    }
  }
}

Erläuterung

Zunächst prüfen wir, ob überhaupt schon ein Gehaltswunsch ausgewählt worden ist (if ('' != wanted)). Wenn dem so ist, nehmen wir unsere "Gehaltstabelle", respektive das entsprechende "Unter"-Array von salary und prüfen mit unserer Hilfsfunktion in_array, ob der gewünschte Betrag zur Ausbildung passt (if (!in_array (wanted, salary))).

Sollte sich herausstellen, dass der Bewerber mehr haben möchte, als die "Super Global Hyper Meganet Ltd." für angemessen erachtet, so weisen wir mit dem alert sanft darauf hin und setzen mit form.Gehaltswunsch.selectedIndex = 0; die Auswahl im select-Feld wieder auf den ersten Eintrag (also die vielen Striche) zurück.

3. Abklemmen

Um zu verhindern, dass jetzt beratungsresistente Bewerber trotzdem noch mal einen zu hohen Gehaltwunsch auswählen, klemmen wir jetzt einfach die entsprechenden Felder ab. Da wir das schon vorher mal gemacht haben, gehe ich nur kurz darauf ein.


function setSalary(wantedsalary)
{
  ...
  for (var 0form.Gehaltswunsch.lengthi++)
  {        
    if (!in_array (form.Gehaltswunsch.options[i].valuesalary))
    {
      form.Gehaltswunsch.options[i].disabled true;
    }
    else
    {
      form.Gehaltswunsch.options[i].disabled false;
    }
  }
}

Erläuterung

Auch die Inhalte von select-Feldern werden von JavaScript intern als Array behandelt, so dass form.Gehaltswunsch.length uns die Anzahl der Einträge zurückliefert. Somit können wir auch die Werte der einzelnen option-Felder mit form.Gehaltswunsch.options[i].value abfragen und mit der "Hilfsfunktion" in_array entsprechend überprüfen. Dabei werden anschließend alle Einträge auf disabled gesetzt, die nicht den Vorgaben entsprechen (form.Gehaltswunsch.options[i].disabled = true;).

4. Fazit

Also zunächst mal ein Hinweis. In diesem Tutorial gibt es noch mindestens zwei dicke Fehler. Versucht mal, sie zu finden und zu beseitigen. Das ist die beste Möglichkeit, um eine Sprache zu lernen.

Ansonsten hoffe ich, dass ihr habt das grundsätzliche Prinzip der Formularverarbeitung verstanden habt. Jetzt werden zwar wieder einige "Experten" rumnölen und sagen, da muss aber ein serverseitiges Fallback eingebaut werden, wenn JavaScript deaktiviert wurde. Stimmt auch, aber das hier ist ein JavaScript-Tutorial und keines, wo es um PHP geht.

zurück zum vorherigen Abschnitt