JavaScript - Praxistutorial 2 - Formularelemente manipulieren
1. Die Abschnitte
- Überblick
- Vorbereitung
- Formularinhalte überprüfen
- Diverse Feinarbeiten
- Formularelemente deaktivieren
- Formularelemente abfragen
- Formularelemente manipulieren
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(wanted, salary)
{
if ('' != wanted)
{
if (!in_array (wanted, salary))
{
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(wanted, salary)
{
...
for (var i = 0; i < form.Gehaltswunsch.length; i++)
{
if (!in_array (form.Gehaltswunsch.options[i].value, salary))
{
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.