Formulaire en étapes avec barre de progression

Introduction

Dans ce projet, vous allez apprendre à implémenter un formulaire en étapes avec une barre de progression à l'aide de jQuery. Ce projet est conçu pour vous aider à comprendre le processus de création d'un formulaire dynamique et interactif qui permet aux utilisateurs de naviguer facilement entre les différentes étapes.

👀 Aperçu

step by step form demo

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment implémenter la fonctionnalité du bouton "Page suivante" pour passer à l'étape suivante du formulaire.
Comment implémenter la fonctionnalité du bouton "Précédent" pour passer à l'étape précédente du formulaire.
Comment implémenter la fonctionnalité du bouton "Soumettre" pour afficher un message de succès.
Comment mettre à jour la barre de progression pour refléter l'étape actuelle du formulaire.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Utiliser jQuery pour manipuler le DOM et gérer les interactions de l'utilisateur.
Contrôler l'affichage des champs de formulaire à l'aide de la propriété display.
Mettre à jour la barre de progression pour refléter l'étape actuelle du formulaire.
Créer un formulaire en étapes avec une interface utilisateur propre et intuitive.

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

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

Dans lequel :

css/style.css est le fichier de style.
js/index.js est le fichier JavaScript pour implémenter la navigation entre les étapes du formulaire.
js/jquery-3.6.0.min.js est le fichier jQuery.
index.html est la page principale.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement pour voir la page.

Implémenter le bouton de page suivante

Dans cette étape, vous allez apprendre à implémenter la fonctionnalité du bouton "suivant" dans la première étape du formulaire.

Ouvrez le fichier js/index.js.
Localisez le code $(".next").click et ajoutez le code :

// Cliquez sur le bouton de la page suivante
$(".next").click(function () {
  current_form = $(this).parent();
  next_form = current_form.next();
  // Contrôlez l'affichage de la prochaine forme et du masquage des autres formes
  next_form.show().siblings("fieldset").hide();
  const index = next_form.index() - 1;
  $("#progressbar li").eq(index).addClass("active");
});

Ce code est responsable de la gestion de l'événement de clic du bouton "Page suivante". Analysons ce qu'il fait :
- $(".next").click(function () {... }) : Cela configure un gestionnaire d'événement de clic pour tous les éléments ayant la classe "next".
- current_form = $(this).parent(); : Cela obtient le champ de formulaire actuel (celui contenant le bouton "Page suivante" qui a été cliqué).
- next_form = current_form.next(); : Cela obtient le champ de formulaire suivant (celui qui devrait être affiché après avoir cliqué sur le bouton "Page suivante").
- next_form.show().siblings("fieldset").hide(); : Cela affiche le champ de formulaire suivant et masque tous les autres champs de formulaire (les frères du champ de formulaire suivant).
- const index = next_form.index() - 1; : Cela calcule l'index du champ de formulaire suivant, qui sera utilisé pour mettre à jour la barre de progression.
- $("#progressbar li").eq(index).addClass("active"); : Cela ajoute la classe "active" à l'élément correspondant de la barre de progression, indiquant que l'utilisateur est passé à l'étape suivante.

Implémenter le bouton Précédent

Dans cette étape, vous allez apprendre à implémenter la fonctionnalité du bouton "précédent" dans la deuxième étape du formulaire.

Dans le fichier js/index.js, localisez le code $(".previous").click et ajoutez le code :

// Cliquez sur le bouton de retour
$(".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");
});

Ce code est responsable de la gestion de l'événement de clic du bouton "Précédent". Analysons ce qu'il fait :
- $(".previous").click(function () {... }) : Cela configure un gestionnaire d'événement de clic pour tous les éléments ayant la classe "previous".
- current_form = $(this).parent(); : Cela obtient le champ de formulaire actuel (celui contenant le bouton "Précédent" qui a été cliqué).
- previous_form = current_form.prev(); : Cela obtient le champ de formulaire précédent (celui qui devrait être affiché après avoir cliqué sur le bouton "Précédent").
- previous_form.show().siblings("fieldset").hide(); : Cela affiche le champ de formulaire précédent et masque tous les autres champs de formulaire (les frères du champ de formulaire précédent).
- const index = previous_form.index() - 1; : Cela calcule l'index du champ de formulaire précédent, qui sera utilisé pour mettre à jour la barre de progression.
- $("#progressbar li").eq(index).addClass("active").next().removeClass("active"); : Cela ajoute la classe "active" à l'élément correspondant de la barre de progression, indiquant que l'utilisateur est passé à l'étape précédente, et retire la classe "active" de l'élément suivant de la barre de progression.

Implémenter le bouton Soumettre

Dans cette étape, vous allez apprendre à implémenter la fonctionnalité du bouton "soumettre" dans la troisième étape du formulaire.

Dans le fichier js/index.js, localisez le code $(".submit").click et ajoutez le code :

// Cliquez sur le bouton de soumission
$(".submit").click(function () {
  alert("Soumis avec succès!");
});

Ce code est responsable de la gestion de l'événement de clic du bouton "Soumettre". Analysons ce qu'il fait :
- $(".submit").click(function () {... }) : Cela configure un gestionnaire d'événement de clic pour tous les éléments ayant la classe "submit".
- alert("Soumis avec succès!"); : Cela affiche un message d'alerte à l'utilisateur, indiquant que le formulaire a été soumis avec succès.

Après avoir terminé ces quatre étapes, la fonctionnalité du formulaire en étapes devrait être entièrement implémentée. Vous pouvez tester le formulaire en cliquant sur les boutons "suivant", "précédent" et "soumettre" pour vous assurer que la navigation entre les étapes et la mise à jour de la barre de progression fonctionnent comme prévu. L'effet final de la page est le suivant :

Image Description

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.

Passer à l'étape suivante