Ir para a Próxima Etapa

Introdução

Neste projeto, você aprenderá como implementar um formulário passo a passo com uma barra de progresso usando jQuery. Este projeto foi projetado para ajudá-lo a entender o processo de criação de um formulário dinâmico e interativo que permite aos usuários navegar por diferentes etapas facilmente.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como implementar a funcionalidade do botão "Próxima Página" para mudar para a próxima etapa do formulário.
• Como implementar a funcionalidade do botão "Anterior" para mudar para a etapa anterior do formulário.
• Como implementar a funcionalidade do botão "Enviar" para exibir uma mensagem de sucesso.
• Como atualizar a barra de progresso para refletir a etapa atual do formulário.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar jQuery para manipular o DOM (Document Object Model) e lidar com interações do usuário.
• Controlar a exibição dos campos do formulário usando a propriedade display.
• Atualizar a barra de progresso para refletir a etapa atual do formulário.
• Criar um formulário passo a passo com uma interface de usuário limpa e intuitiva.

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga as etapas abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura do diretório é a seguinte:

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

Entre eles:

• css/style.css é o arquivo de estilo.
• js/index.js é o arquivo JavaScript para implementar a troca do formulário passo a passo.
• js/jquery-3.6.0.min.js é o arquivo jQuery.
• index.html é a página principal.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar o Botão 'Próxima Página'

Nesta etapa, você aprenderá como implementar a funcionalidade do botão "próxima" na primeira etapa do formulário.

1. Abra o arquivo js/index.js.
2. Localize o código $(".next").click e adicione o código:

// 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. Este código é responsável por lidar com o evento de clique do botão "Próxima Página". Vamos detalhar o que ele faz:
   • $(".next").click(function () { ... }): Isso configura um manipulador de evento de clique para quaisquer elementos com a classe "next".
   • current_form = $(this).parent();: Isso obtém o campo de formulário atual (aquele que contém o botão "Próxima Página" que foi clicado).
   • next_form = current_form.next();: Isso obtém o próximo campo de formulário (aquele que deve ser exibido após clicar no botão "Próxima Página").
   • next_form.show().siblings("fieldset").hide();: Isso mostra o próximo campo de formulário e oculta todos os outros campos de formulário (irmãos do próximo campo de formulário).
   • const index = next_form.index() - 1;: Isso calcula o índice do próximo campo de formulário, que será usado para atualizar a barra de progresso.
   • $("#progressbar li").eq(index).addClass("active");: Isso adiciona a classe "active" ao item correspondente da barra de progresso, indicando que o usuário passou para a próxima etapa.

Implementar o Botão 'Voltar'

Nesta etapa, você aprenderá como implementar a funcionalidade do botão "anterior" na segunda etapa do formulário.

1. No arquivo js/index.js, localize o código $(".previous").click e adicione o código:

// 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. Este código é responsável por lidar com o evento de clique do botão "Anterior". Vamos detalhar o que ele faz:
   • $(".previous").click(function () { ... }): Isso configura um manipulador de evento de clique para quaisquer elementos com a classe "previous".
   • current_form = $(this).parent();: Isso obtém o campo de formulário atual (aquele que contém o botão "Anterior" que foi clicado).
   • previous_form = current_form.prev();: Isso obtém o campo de formulário anterior (aquele que deve ser exibido após clicar no botão "Anterior").
   • previous_form.show().siblings("fieldset").hide();: Isso mostra o campo de formulário anterior e oculta todos os outros campos de formulário (irmãos do campo de formulário anterior).
   • const index = previous_form.index() - 1;: Isso calcula o índice do campo de formulário anterior, que será usado para atualizar a barra de progresso.
   • $("#progressbar li").eq(index).addClass("active").next().removeClass("active");: Isso adiciona a classe "active" ao item correspondente da barra de progresso, indicando que o usuário voltou para a etapa anterior, e remove a classe "active" do próximo item da barra de progresso.

Implementar o Botão 'Enviar'

Nesta etapa, você aprenderá como implementar a funcionalidade do botão "enviar" na terceira etapa do formulário.

1. No arquivo js/index.js, localize o código $(".submit").click e adicione o código:

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

2. Este código é responsável por lidar com o evento de clique do botão "Enviar". Vamos detalhar o que ele faz:
   • $(".submit").click(function () { ... }): Isso configura um manipulador de evento de clique para quaisquer elementos com a classe "submit".
   • alert("Submitted successfully!");: Isso exibe uma mensagem de alerta ao usuário, indicando que o formulário foi enviado com sucesso.

Após concluir estas quatro etapas, a funcionalidade do formulário passo a passo deve estar totalmente implementada. Você pode testar o formulário clicando nos botões "próxima", "anterior" e "enviar" para garantir que a troca de formulário e as atualizações da barra de progresso estejam funcionando conforme o esperado. O efeito da página final é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.