Pasa al siguiente paso

Introducción

En este proyecto, aprenderás cómo implementar un formulario paso a paso con una barra de progreso utilizando jQuery. Este proyecto está diseñado para ayudarte a entender el proceso de creación de un formulario dinámico e interactivo que permita a los usuarios navegar fácilmente a través de diferentes pasos.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo implementar la funcionalidad del botón "Siguiente página" para pasar al siguiente paso del formulario.
• Cómo implementar la funcionalidad del botón "Anterior" para pasar al paso anterior del formulario.
• Cómo implementar la funcionalidad del botón "Enviar" para mostrar un mensaje de éxito.
• Cómo actualizar la barra de progreso para reflejar el paso actual del formulario.

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar jQuery para manipular el DOM y manejar las interacciones del usuario.
• Controlar la visualización de los campos del formulario utilizando la propiedad display.
• Actualizar la barra de progreso para reflejar el paso actual del formulario.
• Crear un formulario paso a paso con una interfaz de usuario limpia e intuitiva.

Configura la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

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

Entre ellos:

• css/style.css es el archivo de estilo.
• js/index.js es el archivo de JavaScript para implementar el cambio del formulario paso a paso.
• js/jquery-3.6.0.min.js es el archivo de jQuery.
• index.html es la página principal.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

A continuación, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Implementar el botón de la siguiente página

En este paso, aprenderás cómo implementar la funcionalidad del botón "siguiente" en el primer paso del formulario.

1. Abre el archivo js/index.js.
2. Localiza el código $(".next").click y agrega el código:

// Haz clic en el botón de la siguiente página
$(".next").click(function () {
  current_form = $(this).parent();
  next_form = current_form.next();
  // Controla que se muestre el siguiente formulario y se oculten los demás
  next_form.show().siblings("fieldset").hide();
  const index = next_form.index() - 1;
  $("#progressbar li").eq(index).addClass("active");
});

3. Este código se encarga de manejar el evento de clic del botón "Siguiente página". Analicemos lo que hace:
   • $(".next").click(function () {... }): Esto establece un manejador de eventos de clic para cualquier elemento con la clase "next".
   • current_form = $(this).parent();: Esto obtiene el campo de formulario actual (el que contiene el botón "Siguiente página" que se hizo clic).
   • next_form = current_form.next();: Esto obtiene el siguiente campo de formulario (el que debe mostrarse después de hacer clic en el botón "Siguiente página").
   • next_form.show().siblings("fieldset").hide();: Esto muestra el siguiente campo de formulario y oculta todos los demás campos de formulario (hermanos del siguiente campo de formulario).
   • const index = next_form.index() - 1;: Esto calcula el índice del siguiente campo de formulario, que se utilizará para actualizar la barra de progreso.
   • $("#progressbar li").eq(index).addClass("active");: Esto agrega la clase "activo" al elemento correspondiente de la barra de progreso, lo que indica que el usuario ha pasado al siguiente paso.

Implementar el botón de página anterior

En este paso, aprenderás cómo implementar la funcionalidad del botón "anterior" en el segundo paso del formulario.

1. En el archivo js/index.js, localiza el código $(".previous").click y agrega el código:

// Haz clic en el botón de retroceso
$(".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. Este código se encarga de manejar el evento de clic del botón "Anterior". Analicemos lo que hace:
   • $(".previous").click(function () {... }): Esto establece un manejador de eventos de clic para cualquier elemento con la clase "previous".
   • current_form = $(this).parent();: Esto obtiene el campo de formulario actual (el que contiene el botón "Anterior" que se hizo clic).
   • previous_form = current_form.prev();: Esto obtiene el campo de formulario anterior (el que debe mostrarse después de hacer clic en el botón "Anterior").
   • previous_form.show().siblings("fieldset").hide();: Esto muestra el campo de formulario anterior y oculta todos los demás campos de formulario (hermanos del campo de formulario anterior).
   • const index = previous_form.index() - 1;: Esto calcula el índice del campo de formulario anterior, que se utilizará para actualizar la barra de progreso.
   • $("#progressbar li").eq(index).addClass("active").next().removeClass("active");: Esto agrega la clase "activo" al elemento correspondiente de la barra de progreso, lo que indica que el usuario ha retrocedido al paso anterior, y quita la clase "activo" del siguiente elemento de la barra de progreso.

Implementar el botón de envío

En este paso, aprenderás cómo implementar la funcionalidad del botón "enviar" en el tercer paso del formulario.

1. En el archivo js/index.js, localiza el código $(".submit").click y agrega el código:

// Haz clic en el botón de envío
$(".submit").click(function () {
  alert("Enviado correctamente!");
});

2. Este código se encarga de manejar el evento de clic del botón "Enviar". Analicemos lo que hace:
   • $(".submit").click(function () {... }): Esto establece un manejador de eventos de clic para cualquier elemento con la clase "submit".
   • alert("Enviado correctamente!");: Esto muestra un mensaje de alerta al usuario, indicando que el formulario se ha enviado correctamente.

Después de completar estos cuatro pasos, la funcionalidad del formulario paso a paso debería estar completamente implementada. Puedes probar el formulario haciendo clic en los botones "siguiente", "anterior" y "enviar" para asegurarte de que el cambio de formulario y la actualización de la barra de progreso funcionen como se espera. El efecto final de la página es el siguiente:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.