Перейти к следующему шагу

Введение

В этом проекте вы научитесь реализовывать шаговый форму с полосой прогресса с использованием jQuery. Этот проект предназначен для того, чтобы помочь вам понять процесс создания динамической и интерактивной формы, которая позволяет пользователям легко перемещаться между различными шагами.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Как реализовать функциональность кнопки "Следующая страница" для перехода к следующему шагу формы.
• Как реализовать функциональность кнопки "Назад" для перехода к предыдущему шагу формы.
• Как реализовать функциональность кнопки "Отправить" для отображения сообщения об успехе.
• Как обновить полосу прогресса, чтобы отобразить текущий шаг формы.

🏆 Достижения

После завершения этого проекта вы сможете:

• Использовать jQuery для манипуляции с DOM и обработки взаимодействий пользователя.
• Управлять отображением полей формы с использованием свойства display.
• Обновлять полосу прогресса, чтобы отобразить текущий шаг формы.
• Создать шаговую форму с чистым и интуитивным интерфейсом пользователя.

Skills Graph

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

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

В них:

• css/style.css - файл стилей.
• js/index.js - JavaScript-файл для реализации переключения шаговой формы.
• js/jquery-3.6.0.min.js - файл jQuery.
• index.html - главная страница.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, чтобы увидеть страницу.

Реализация кнопки "Следующая страница"

В этом шаге вы научитесь реализовывать функциональность кнопки "далее" на первом шаге формы.

1. Откройте файл js/index.js.
2. Найдите код $(".next").click и добавьте код:

// 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. Этот код отвечает за обработку события нажатия кнопки "Следующая страница". Рассмотрим, что он делает:

   • $(".next").click(function () {... }): Это устанавливает обработчик события нажатия для любых элементов с классом "next".
   • current_form = $(this).parent();: Это получает текущее поле формы (те, которое содержит кнопку "Следующая страница", на которую нажали).
   • next_form = current_form.next();: Это получает следующее поле формы (те, которое должно быть отображено после нажатия кнопки "Следующая страница").
   • next_form.show().siblings("fieldset").hide();: Это показывает следующее поле формы и скрывает все другие поля формы (братья следующего поля формы).
   • const index = next_form.index() - 1;: Это вычисляет индекс следующего поля формы, который будет использоваться для обновления полосы прогресса.
   • $("#progressbar li").eq(index).addClass("active");: Это добавляет класс "active" к соответствующему элементу полосы прогресса, указывая, что пользователь перешел к следующему шагу.

Реализация кнопки "Назад"

В этом шаге вы научитесь реализовывать функциональность кнопки "назад" на втором шаге формы.

1. В файле js/index.js найдите код $(".previous").click и добавьте код:

// 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. Этот код отвечает за обработку события нажатия кнопки "Назад". Рассмотрим, что он делает:
   • $(".previous").click(function () {... }): Это устанавливает обработчик события нажатия для любых элементов с классом "previous".
   • 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");: Это добавляет класс "active" к соответствующему элементу полосы прогресса, указывая, что пользователь перешел к предыдущему шагу, и удаляет класс "active" из следующего элемента полосы прогресса.

Реализация кнопки "Отправить"

В этом шаге вы научитесь реализовывать функциональность кнопки "отправить" на третьем шаге формы.

1. В файле js/index.js найдите код $(".submit").click и добавьте код:

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

2. Этот код отвечает за обработку события нажатия кнопки "Отправить". Рассмотрим, что он делает:
   • $(".submit").click(function () {... }): Это устанавливает обработчик события нажатия для любых элементов с классом "submit".
   • alert("Submitted successfully!");: Это отображает сообщение об уведомлении пользователю, указывая, что форма успешно отправлена.

После завершения этих четырех шагов функциональность шаговой формы должна быть полностью реализована. Вы можете протестировать форму, нажав кнопки "далее", "назад" и "отправить", чтобы убедиться, что переключение форм и обновление полосы прогресса работают как ожидается. Финальный эффект страницы выглядит так:

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.