Sie sind hier: Startseite -> Javascript-Grundlagen -> Event-Handler -> onclick

Onclick in Javascript - Javascript-Grundlagen - Javascript-Programmierung

Onclick: Javascript-Routinen vor der Weiterleitung

Neben den bereits beschriebenen Event-Handlern onmouseover und onmouseout gibt es einen weiteren Vertreter, den man schon als klassisch bezeichnen kann, nämlich onclick. Wie der Name verrät, aktiviert er sich dann, wenn man auf ein Element mit der Maus geklickt hat, was bei Links am ehesten denkbar ist.

Dabei ist der normale Vorgang, dass man an die Zieladresse weitergeleitet wird, doch das ist nicht immer gewünscht. Das beste Beispiel aus der Praxis ist ein Formular, das überprüft werden soll, bevor die Reise weitergeht. Der Link an die Zieladresse ist zwar genannt, aber vorher soll eine Funktion aus Javascript heraus prüfen, ob alle Felder wirklich ausgefüllt wurden und ob die Einträge stimmen können.

Damit das funktionieren kann, ist der Event-Handler onclick zwischengeschaltet. Javascript registriert, dass auf die Schaltfläche "Abschicken" geklickt wurde und meldet der zuständigen Funktion, die bei onclick eingetragen ist, dass die Arbeit losgehen kann.

In der Funktion werden alle Felder genannt, die überprüft werden sollen. Es kann ja sein, dass das Formular 20 Felder hat, aber nur der Name und die E-Mail-Adresse müssen wirklich ausgefüllt sein, der Rest sind freiwillige Angaben. Das Skript prüft, ob die Pflichtfelder richtig ausgefüllt sind und wenn ja, wird das Formular wie gewünscht abgeschickt.

Wenn nicht, gibt es eine Dialogbox mit der entsprechenden Fehlermeldung und man kann Javascript nützen, um ein Formularfeld gleich mit dem aktiven Cursor auszustatten, sodass bei längeren Formularen das Suchen nach dem entsprechenden Feld entfällt.

Sie wollen den Artikel teilen?
bei Twitter teilen bei Facebook teilen Artikel per E-Mail empfehlen