JavaScript - Praxistutorial 2 - Formularinhalte überprüfen

1. Die Abschnitte

2. Einbindung

Auch diesmal wollen wir den größten Teil unseres Codes in eine externe Datei auslagern. In diesem Fall ist das die check.js. Aber das macht ihr diesmal selber. So weit solltet ihr jetzt schon sein.

3. Der Firefox

... hat meiner Meinung nach leider eine Eigenschaft, die Programmieren das Leben künstlich schwer macht. Wenn man nämlich zu Testzwecken ein Formular ausfüllt und nach der Beseitigung eines Fehlers die Seite aktualisiert, so merkt der sich die zuvor eingegebenen Inhalte. Das mag ja ein ganz nettes Feature sein, aber während der Entwicklung nervt das ganz fürchterlich. Also wollen wir sämtliche Inhalte bei einem Reload der Seite killen, weghauen oder plattmachen (damit mich auch die CS-Geschädigten verstehen). Und das geschieht so.


document.jobangebot.reset();

Erläuterung

Bei JavaScript gibt es mehrere Möglichkeiten (wie immer), um ein Formular anzusteuern. Ich nehme hier mal die meiner Meinung nach einfachste. Das Schema dabei ist ganz einfach, also zuerst document und dann den Namen des Formulars.


<form ... name="jobangebot">

Mit reset versetzen wir das Formular einfach in seinen Anfangszustand zurück. Dahinter steckt dieselbe Funktionalität wie bei einem <input type="reset">-Button. Das funktioniert auch wunderbar, solange man nicht XHTML in der Variante strict als Doctype angibt. Da ist nämlich das name-Attribut bei Formularen verboten. Aber das soll uns im Moment nicht jucken.

ABER!!!

Wir haben ja immer noch das Problem, das ich im ersten Tutorial unter dem Punkt 5 beschrieben habe. Also diese onload-Geschichte. Wir könnten jetzt auf die Idee kommen, wie gehabt, das in das <body>-Tag zu packen. Da wir aber noch zusätzliche Referenzen auf Formularelemente benötigen, kann da schon mal ein ziemlicher Rattenschwanz entstehen.

4. Versprochen ist versprochen

Im ersten Tutorial habe ich gesagt, dass eine elegantere Möglichkeit gibt, um das onload-Problem zu umgehen. Voilà, hier ist sie. Eigentlich gehört das Folgende schon zum Thema DOM-Scripting, aber ich gebe euch trotzdem einen ersten Einblick. Schreibt also mal folgenden Code in die check.js.


window.onload = function ()
{
  form = document.jobangebot; 
  form.reset();
  fields = document.getElementsByName('Ausbildung[]');
}

Erläuterung

window.onload entspricht dem <body onload="...">, wenn man es in eine externe Datei auslagert. Warum kein body.onload? Na ja, ist halt JavaScript. Mit form = document.jobangebot; legen wir eine Referenz, also eine Art von Verweis auf das Formular fest. Und deshalb können wir auch das Zurücksetzen der Formularwerte mit form.reset(); durchführen.

Und was soll das

Ganz einfach, sollte sich der Name des Formulars ändern, so müssen wir den JavaScript-Code nur an einer Stelle ändern und der Rest funktioniert trotzdem. Praktisch gesehen bedeutet das Folgendes. Ich habe dem Formular zuerst den Namen kollege gegeben. Aber dann fiel mir ein, dass so eine nette Bezeichnung nicht zur "Super Global Hyper Meganet Ltd. passt". So habe ich ihn denn in jobangebot umbenannt und musste den Verweis darauf nur an einer Stelle anpassen. Und das sollet ihr euch auch ganz schnell angewöhnen. Es erspart Arbeit, Blut, Schweiß und Tränen.

`fields`

Dies ist auch nur eine Referenz auf die Checkboxen, die diesen komischen Namen name="Ausbildung[]" haben. Der hat mit JavaScript nichts zu tun, man kann nur später per PHP eine mögliche Mehrfachauswahl leichter verarbeiten.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt