jQuery Schnellstart – Coding Challenge: Mitgliederregistrierung für Yoga-Kurs

Das Ziel der dritten Coding Challenge ist es, eine sehr einfache Mitglieder-Registrierung für eine Yoga-Kurse-Webseite zu erstellen.

Die Website sieht ungefähr so aus:

Wie du im unten stehenden Editor siehst, ist hier bereits jQuery geladen. Die Document.Ready Funktion ist auch vorgeladen. Das bedeutet, dass wir sofort mit deiner Coding-Challenge beginnen können. Ich habe dir dafür eine Aufgabe vorbereitet, die du bewältigen kannst.

Wenn du nicht weiter kommst, kannst du auf die Komplettlösung klicken. Versuche dennoch vorher etwas nachzudenken und auszuprobieren, bevor du die Lösung anschaust.

Viel Spaß bei der Challenge. Hier ist deine Aufgabe:

Aufgabe 1 - User-Input auslesen

(Der jQuery Code beginnt ab Zeile 71)

Zurzeit wird auf der Website ein Anmelde-Formular angezeigt. Um am Yoga-Kurs teilzunehmen, muss der Besucher die drei Felder

• Name,
• Email und
• Kommentar

ausfüllen und dann auf den "Anmelden"-Button klicken.

Deine Aufgabe ist es, dem Teilnehmer eine einfache Bestätigung (alert) mit seinen eingegebenen Daten anzuzeigen. Die val()-Methode, die du in diesem Kapitel kennengelernt hast, wird dir dabei behilflich sein.

Kleiner Tipp am Rande: Mit dem String
  kannst du einen Zeilenumbruch machen. Damit kannst du deinen User-Input übersichtlicher im Alert-Fenster darstellen.

[lp_spoiler title="Tipps anzeigen" class="da"]

1. Damit dein Formular bzw. der "Anmelden"-Button auf einen Klick reagiert, benötigst du zuerst einen Identifier des Buttons. Leider hat der Button weder eine ID noch eine Klasse. Doch zum Glück gibt es nur einen Button auf der kompletten Seite. Daher kannst du ihn mit "button" ansprechen.
2. Jetzt, da du den Button auswählen kannst, baust du eine click()-Methode. Dein Code kommt in Zeile 71 (unter die document.ready Funktion).
3. Du möchtest einen Alert auslösen, sobald der "Anmelden"-Button angeklickt wird. Erstelle dafür die alert()-Methode in Zeile 72.
4. Wenn Du deinen Code jetzt startest, kannst du bereits testen, ob der Alert bei einem Klick auf den Button erscheint.
5. Jetzt ändern wir die Alert-Methode in Zeile 72, damit der User-Input ausgelesen und angezeigt wird. Du möchtest den Namen, die Email sowie einen Kommentar, auslesen. Suche im HTML-Code nach den passenden ID's dieser drei Elemente (Tipp: Das Formular beginnt ab Zeile 31. Vielleicht findest du hier passende ID's, zum Auswählen der Elemente)
6. Schreibe die ID's jetzt jeweils in eine val()-Methode. Diese fügst du in die Zeile mit deinem alert()-Code ein. (Tipp: Du benötigst drei val()-Methoden)
7. Kleiner Tipp: Mit dem String
     kannst du einen Zeilenumbruch machen. Damit kannst du deinen User-Input übersichtlicher im Alert-Fenster darstellen.
8. Starte den Code, fülle die drei Formular-Felder aus und teste, ob der User-Input ausgelesen wird.

[/lp_spoiler]

Wenn du zusätzliche Hilfe brauchst, findest du hier die Lösung zu Aufgabe 1:

[lp_spoiler title="Lösung zu Aufgabe 1:" class="da"]

Füge diesen Code in Zeile 72 ein:

alert(" Name: " + $("#name").val() +	"
 E-Mail: " + $("#email").val() + "
 Kommentar: " + $("#kommentar").val());

[/lp_spoiler]

Aufgabe 2 - Erfolgsmeldung unter dem Formular anzeigen

(Dein jQuery Code für diese Aufgabe beginnt ab Zeile 73, unter der alert()-Funktion)

Hast du Aufgabe 1 bereits abgeschlossen?

Super! Du möchtest deinem Webseiten-Besucher eine einfache Text-Bestätigung unter dem Formular anzeigen, sobald er sich für einen Yoga-Kurs registriert hat. Die Meldung kann z.B. so aussehen: "Du bist jetzt angemeldet!"

Ich habe dir in Zeile 51 bereits das passende <p>-Element mit einer ID erstellt. (Tipp: Die text()-Methode ist für die 2. Aufgabe hilfreich)

Wenn du zusätzliche Hilfe brauchst, findest du hier die Lösung zu Aufgabe 2:

[lp_spoiler title="Lösung zu Aufgabe 2:" class="da"]

Füge diesen Code in Zeile 73 (unter die alert()-Methode) ein:

$("#erfolg").text("Du bist jetzt angemeldet!");

[/lp_spoiler]

Hier ist die Komplettlösung der Coding Challenge:

[lp_spoiler title="Komplettlösung zur Coding-Challenge #3 anzeigen" class="da"]

<script>
  $(document).ready(function(){
	$("button").click(function(){
		alert(" Name: " + $("#name").val() +	"
 E-Mail: " + $("#email").val() + "
 Kommentar: " + $("#kommentar").val());
		$("#erfolg").text("Du bist jetzt angemeldet!");
	});
  });
</script>

[/lp_spoiler]

(Der jQuery Code beginnt ab Zeile 71)