Gehe zum nächsten Schritt

Einführung

In diesem Projekt lernst du, wie du ein Schritt-für-Schritt-Formular mit einer Fortschrittsbalken mit jQuery implementierst. Dieses Projekt ist so konzipiert, dass es dir hilft, den Prozess des Erstellens eines dynamischen und interaktiven Formulars zu verstehen, das es Benutzern ermöglicht, leicht durch verschiedene Schritte zu navigieren.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Funktionalität der Schaltfläche "Nächste Seite" implementierst, um zum nächsten Schritt des Formulars zu wechseln.
• Wie du die Funktionalität der Schaltfläche "Zurück" implementierst, um zum vorherigen Schritt des Formulars zu wechseln.
• Wie du die Funktionalität der Schaltfläche "Absenden" implementierst, um eine Erfolgsmeldung anzuzeigen.
• Wie du die Fortschrittsbalken aktualisierst, um den aktuellen Schritt des Formulars wiederzugeben.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• jQuery zum Manipulieren des DOM und zur Behandlung von Benutzereingaben zu verwenden.
• Die Anzeige von Formularfeldern mithilfe der display-Eigenschaft zu steuern.
• Die Fortschrittsbalken aktualisieren, um den aktuellen Schritt des Formulars wiederzugeben.
• Ein Schritt-für-Schritt-Formular mit einer sauberen und intuitiven Benutzeroberfläche zu erstellen.

Skills Graph

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -Struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur ist wie folgt:

├── css
│   └── style.css
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
└── index.html

Darin:

• css/style.css ist die Stylesheet-Datei.
• js/index.js ist die JavaScript-Datei zur Implementierung des Umschaltens des Schritt-für-Schritt-Formulars.
• js/jquery-3.6.0.min.js ist die jQuery-Datei.
• index.html ist die Hauptseite.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, um die Seite zu sehen.

Implementiere die Schaltfläche "Nächste Seite"

In diesem Schritt wirst du lernen, wie du die Funktionalität der Schaltfläche "Nächste" im ersten Schritt des Formulars implementierst.

1. Öffne die Datei js/index.js.
2. Locate the $(".next").click code and add the code:

// Click the button on the next page
$(".next").click(function () {
  current_form = $(this).parent();
  next_form = current_form.next();
  // Control the next form to be shown and other forms to be hidden
  next_form.show().siblings("fieldset").hide();
  const index = next_form.index() - 1;
  $("#progressbar li").eq(index).addClass("active");
});

3. Dieser Code ist für die Behandlung des Klickereignisses der Schaltfläche "Nächste Seite" verantwortlich. Schauen wir uns an, was er tut:

   • $(".next").click(function () {... }): Dies legt einen Klickereignishandler für alle Elemente mit der Klasse "next" fest.
   • current_form = $(this).parent();: Dies erhält das aktuelle Formularfeld (dasjenige, das die geklickte Schaltfläche "Nächste Seite" enthält).
   • next_form = current_form.next();: Dies erhält das nächste Formularfeld (dasjenige, das nach dem Klicken der Schaltfläche "Nächste Seite" angezeigt werden soll).
   • next_form.show().siblings("fieldset").hide();: Dies zeigt das nächste Formularfeld an und versteckt alle anderen Formularfelder (Geschwister des nächsten Formularfelds).
   • const index = next_form.index() - 1;: Dies berechnet den Index des nächsten Formularfelds, der zur Aktualisierung der Fortschrittsbalken verwendet werden wird.
   • $("#progressbar li").eq(index).addClass("active");: Dies fügt die Klasse "active" zum entsprechenden Fortschrittsbalkenelement hinzu, was angibt, dass der Benutzer zum nächsten Schritt gewechselt ist.

Implementiere die Schaltfläche "Zurück"

In diesem Schritt wirst du lernen, wie du die Funktionalität der Schaltfläche "Zurück" im zweiten Schritt des Formulars implementierst.

1. In der Datei js/index.js finde den Code $(".previous").click und füge den folgenden Code hinzu:

// Click the back button
$(".previous").click(function () {
  current_form = $(this).parent();
  previous_form = current_form.prev();
  previous_form.show().siblings("fieldset").hide();
  const index = previous_form.index() - 1;
  $("#progressbar li")
    .eq(index)
    .addClass("active")
    .next()
    .removeClass("active");
});

2. Dieser Code ist für die Behandlung des Klickereignisses der Schaltfläche "Zurück" verantwortlich. Schauen wir uns an, was er tut:
   • $(".previous").click(function () {... }): Dies legt einen Klickereignishandler für alle Elemente mit der Klasse "previous" fest.
   • current_form = $(this).parent();: Dies erhält das aktuelle Formularfeld (dasjenige, das die geklickte Schaltfläche "Zurück" enthält).
   • previous_form = current_form.prev();: Dies erhält das vorherige Formularfeld (dasjenige, das nach dem Klicken der Schaltfläche "Zurück" angezeigt werden soll).
   • previous_form.show().siblings("fieldset").hide();: Dies zeigt das vorherige Formularfeld an und versteckt alle anderen Formularfelder (Geschwister des vorherigen Formularfelds).
   • const index = previous_form.index() - 1;: Dies berechnet den Index des vorherigen Formularfelds, der zur Aktualisierung der Fortschrittsbalken verwendet werden wird.
   • $("#progressbar li").eq(index).addClass("active").next().removeClass("active");: Dies fügt die Klasse "active" zum entsprechenden Fortschrittsbalkenelement hinzu, was angibt, dass der Benutzer zum vorherigen Schritt gewechselt ist, und entfernt die Klasse "active" vom nächsten Fortschrittsbalkenelement.

Implementiere die Schaltfläche "Absenden"

In diesem Schritt wirst du lernen, wie du die Funktionalität der Schaltfläche "Absenden" im dritten Schritt des Formulars implementierst.

1. In der Datei js/index.js finde den Code $(".submit").click und füge den folgenden Code hinzu:

// Click the submit button
$(".submit").click(function () {
  alert("Erfolgreich abgeschickt!");
});

2. Dieser Code ist für die Behandlung des Klickereignisses der Schaltfläche "Absenden" verantwortlich. Schauen wir uns an, was er tut:
   • $(".submit").click(function () {... }): Dies legt einen Klickereignishandler für alle Elemente mit der Klasse "submit" fest.
   • alert("Erfolgreich abgeschickt!");: Dies zeigt eine Popup-Meldung an den Benutzer an, die angibt, dass das Formular erfolgreich abgeschickt wurde.

Nach Abschluss dieser vier Schritte sollte die Funktionalität des Schritt-für-Schritt-Formulars vollständig implementiert sein. Du kannst das Formular testen, indem du auf die Schaltflächen "Nächste", "Zurück" und "Absenden" klickst, um sicherzustellen, dass das Umschalten des Formulars und die Aktualisierung der Fortschrittsbalken wie erwartet funktionieren. Die Endseite sieht wie folgt aus:

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.