Auftrag 7: Interaktive Formulare

Einzelarbeit, Zeit: 60 Minuten

Studieren Sie als Erstes das folgende Kapitel und Seiten im Modulbuch:

  Buch «JAVASCRIPT & JQUERY», Kapitel 1/c, sowie Seiten 300-301 und 354-357

Erstellen Sie eine Kopie der Dateien aus Auftrag 2: „Grundlegendes Formular erstellen“ und arbeiten Sie auf dieser Basis weiter.

jQuery einbinden

Binden Sie jQuery mittels einem CDN ein. Suchen Sie hierzu im Internet nach der aktuellsten Version: https://releases.jquery.com/

Felder in Abhängigkeit eines anderen Feldes anzeigen

Fügen Sie nun weitere Felder hinzu, die auf Basis eines anderen Feldes angezeigt oder ausgeblendet werden:

Label Feldname Validierung Bemerkung
Social Media Netzwerk smnetwork   Dieses Feld soll nur angezeigt werden, falls im Feld „Wie haben Sie uns gefunden?“ der Wert „Social Media“ ausgewählt wurde.
Empfehlung von advocate  

Dieses Feld soll nur angezeigt werden, falls im Feld „Wie haben Sie uns gefunden?“ der Wert „Empfehlung“ ausgewählt wurde. Über diesem Feld soll der Anleitungstext „Geben Sie hier die Person an, die uns empfholen hat.“ miterscheinen.

Eine Auflistung der wichtigsten jQuery Funktionen finden Sie auf Seite 304-305.

Pflichtfelder ausweisen

Zum Schluss möchten wir noch bei den Formularfeldern, die mit „required“ markiert wurden, ein rotes Sternchen * hinter das Label setzten. Tun Sie das, indem Sie die entsprechenden Felder via jQuery auswählen und dann je Label ein neues Element mit dem roten Sternchen einfügen.