Home > Software design >  Create multi step form using javascript and HTML - Hide a step if option is chosen
Create multi step form using javascript and HTML - Hide a step if option is chosen

Time：02-22

I'm developing a multi step form using html and javascript.

My question is: how do i jump a step if a specific option is chosen?

I want to jump the step about "Que tipo de pacote quer formar?" if the option "Peças" was chosen in the second question.

Bellow my form:

<div >
<form method="post">

<div >

   <div >  
      <label for="nome">Nome:</label>  
      <input type="text" id="nome" name="nome">  
     </div>  
     <div >  
      <label for="mail">E-mail:</label>  
      <input type="email" id="e-mail" name="mail">  
     </div>  
     <div >  
      <label for="telefone">Telefone:</label>  
      <input type="tel" id="telefone" name="tel">  
     </div>  

<button type="button" >Avançar</button>
</div>

<div  >

<div  > <B>Qual produto será empacotado?</B><br>
<br>

<select name=empacotado id="empacotamento">
<option value="" disabled selected> Escolha uma opção</option>
<option value=grao>Grão</option>
<option value=po>Pó</option>
<option value=irregular>Irregular</option>
<option value=pecas id=pecas2 >Peças</option>
</select><BR><BR>


</div>

<button type="button" >Retornar</button>
<button type="button" >Avançar</button>

</div>

<div >

<div >  
<B>Possui sistema de alimentação? (Ex: Cilo) </B><br>
<select name=alimentacao>
     <option value="" disabled selected>Escolha uma opção</option>
<option value=sim>Sim</option>
<option value=nao>Não</option>
</select><BR><BR>

</div>

<button type="button" >Retornar</button>
<button type="button" >Avançar</button>

</div>

<div  >
<div >  

<B>Que tipo de pacote quer formar? </B><br>


<select name=pacote>
     <option value="" disabled selected>Escolha uma opção</option>
<option value=almofada>ALMOFADA </option>
<option value=cincosoldas> 5 SOLDAS </option>
<option value=fundochato> FUNDO CHATO </option>
<option value=sachet> SACHET </option>
</select><BR><BR>

</div>

<button type="button" >Retornar</button>
<button type="button" >Avançar</button>

</div>

<div >

<div >  
<B>Adicionar uma Enfardadora a linha?  </B><br>
<select name=enfardadora>
     <option value="" disabled selected>Escolha uma opção</option>
<option value=sim>Sim</option>
<option value=nao>Não</option>
</select><BR><BR>

</div>

<button type="button" >Retornar</button>  
     <button type="submit" >Definir Equipamento </button>  

</div>


   </form>  
</div>  
 </section>

CSS

 .container {  
  max-width: 800px;  
  width: 90%;  
  padding: 50px;  
  box-shadow: 0px 0px 20px #00000020;  
  border-radius: 8px;  
  background-color: white;  
 }  
 .step {  
  display: none;  
 }  
 .step.active {  
  display: block;  
 }  
 .form-group {  
  width: 100%;  
  margin-top: 20px;  
 }  
 .form-group input {  
  width: 100%;  
  border: 1.5px solid rgba(128, 128, 128, 0.418);  
  padding: 5px;  
  font-size: 18px;  
  margin-top: 5px;  
  border-radius: 4px;  
 }  
 
 
 button.next-btn,  
 button.previous-btn,  
 button.submit-btn {  
     
  float: right;  
  margin-top: 20px;  
  padding: 10px 30px;  
  border: none;  
  outline: none;  
  background-color: rgb(180, 220, 255);  
  font-family: "Montserrat";  
  font-size: 18px;  
  cursor: pointer;  
  background-color: #003c71;  
  /* text-align: right; */  
 }  
 
 
 button.previous-btn {  
  float: left;  
  background-color: #003c71;  
   }
   
   
 button.submit-btn {  
  background-color: #003c71;  
 }

JS

const steps = Array.from(document.querySelectorAll("form .step"));  
 const nextBtn = document.querySelectorAll("form .next-btn");  
 const prevBtn = document.querySelectorAll("form .previous-btn");  
 const form = document.querySelector("form");
 
 
 nextBtn.forEach((button) => {  
  button.addEventListener("click", () => {  
   changeStep("next");  
  });  
 });  
 
 
 prevBtn.forEach((button) => {  
  button.addEventListener("click", () => {  
   changeStep("prev");  
  });  
 });  
 
 
 form.addEventListener("submit", (e) => {  
  e.preventDefault();  
  const inputs = [];  
  form.querySelectorAll("input").forEach((input) => {  
   const { name, value } = input;  
   inputs.push({ name, value });  
  });  
  console.log(inputs);  
  form.reset();  
 });  
 

 function changeStep(btn) {  
  let index = 0;  
  const active = document.querySelector(".active");  
  index = steps.indexOf(active);  
  steps[index].classList.remove("active");  
  if (btn === "next") {  
   index  ;  
  } else if (btn === "prev") {  
   index--;  
  }  
  steps[index].classList.add("active");  
 }  
 

  nextBtn.forEach(button => {
      button.addEventListener("click", () => {
        handleEvent("next")
      })
    })
    prevBtn.forEach(button => {
      button.addEventListener("click", () => {
        handleEvent("prev")
      })
    })

CodePudding user response：

I think you should simply check the value of the option before changing the index

function changeStep(btn) {  
  let index = 0;  
  const active = document.querySelector(".active");  
  index = steps.indexOf(active);  
  steps[index].classList.remove("active");  
  let empacotamentoOption = document.getElementById("empacotamento");
    console.log(index);
    console.log(empacotamentoOption.value);
  if (btn === "next") {
    if(index == 2 && empacotamentoOption.value == "pecas"){
      console.log("augmented");
      index  ;
    }
   index  ;  
  } else if (btn === "prev") {  
    if(index == 4 && empacotamentoOption.value == "pecas"){
      console.log("reduced");
      index--;
    }
   index--;  
  }  
  steps[index].classList.add("active");  
 }

CodePudding user response：

I'd propose a more generalized way of handling steps that are not applicable depending on the answers given.

Modify the logic for next/previous to take into account a notapplicable class.

Then add logic to add the notapplicable class to steps based on the selected answer.

    document.querySelector('#empacotamento').addEventListener('change', (event) => {
      if (event.target.value === 'pecas') {
        document.querySelector('.step-4').classList.add('notapplicable');
      } else {
        document.querySelector('.step-4').classList.remove('notapplicable');
      }
    });

See working example below. Press the Run button to see it working.

const steps = Array.from(document.querySelectorAll("form .step"));
const nextBtn = document.querySelectorAll("form .next-btn");
const prevBtn = document.querySelectorAll("form .previous-btn");
const form = document.querySelector("form");

nextBtn.forEach((button) => {
  button.addEventListener("click", () => {
    changeStep("next");
  });
});

prevBtn.forEach((button) => {
  button.addEventListener("click", () => {
    changeStep("prev");
  });
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const inputs = [];
  form.querySelectorAll("input").forEach((input) => {
    const {name, value} = input;
    inputs.push({name, value});
  });
  console.log(inputs);
  form.reset();
});


document.querySelector('#empacotamento').addEventListener('change', (event) => {
  if (event.target.value === 'pecas') {
    document.querySelector('.step-4').classList.add('notapplicable');
  } else {
    document.querySelector('.step-4').classList.remove('notapplicable');
  }
});

function changeStep(btn) {
  const active = document.querySelector(".active");
  let index = steps.indexOf(active);
  
  steps[index].classList.remove("active");
  
  do
    if (btn === "next") {
      index  ;
    } else if (btn === "prev") {
      index--;
    }
  while (steps[index].classList.contains('notapplicable'));
  steps[index].classList.add("active");
}
.container {
  max-width: 800px;
  width: 90%;
  padding: 50px;
  box-shadow: 0px 0px 20px #00000020;
  border-radius: 8px;
  background-color: white;
}

.step {
  display: none;
}

.step.active {
  display: block;
}

.form-group {
  width: 100%;
  margin-top: 20px;
}

.form-group input {
  width: 100%;
  border: 1.5px solid rgba(128, 128, 128, 0.418);
  padding: 5px;
  font-size: 18px;
  margin-top: 5px;
  border-radius: 4px;
}

button.next-btn,
button.previous-btn,
button.submit-btn {
  float: right;
  margin-top: 20px;
  padding: 10px 30px;
  border: none;
  outline: none;
  background-color: rgb(180, 220, 255);
  font-family: "Montserrat";
  font-size: 18px;
  cursor: pointer;
  background-color: #003c71;
  /* text-align: right; */
}

button.previous-btn {
  float: left;
  background-color: #003c71;
}

button.submit-btn {
  background-color: #003c71;
}
<!--
I'm developing a multi step form using html and javascript.

My question is: how do i jump a step if a specific option is chosen?

I want to jump the step about "Que tipo de pacote quer formar?" if the option "Peças" was chosen in the second question.

Bellow my form:
-->
<div >
  <form method="post">

    <div >

      <div >
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome">
      </div>
      <div >
        <label for="mail">E-mail:</label>
        <input type="email" id="e-mail" name="mail">
      </div>
      <div >
        <label for="telefone">Telefone:</label>
        <input type="tel" id="telefone" name="tel">
      </div>

      <button type="button" >Avançar</button>
    </div>

    <div >

      <div >
        <B>Qual produto será empacotado?</B><br>
        <br>

        <select name=empacotado id="empacotamento">
          <option value="" disabled selected> Escolha uma opção</option>
          <option value=grao>Grão</option>
          <option value=po>Pó</option>
          <option value=irregular>Irregular</option>
          <option value=pecas id=pecas2>Peças</option>
        </select>
        <BR>
        <BR>


      </div>

      <button type="button" >Retornar</button>
      <button type="button" >Avançar</button>

    </div>

    <div >

      <div >
        <B>Possui sistema de alimentação? (Ex: Cilo) </B><br>
        <select name=alimentacao>
          <option value="" disabled selected>Escolha uma opção</option>
          <option value=sim>Sim</option>
          <option value=nao>Não</option>
        </select>
        <BR>
        <BR>

      </div>

      <button type="button" >Retornar</button>
      <button type="button" >Avançar</button>

    </div>

    <div >
      <div >

        <B>Que tipo de pacote quer formar? </B><br>


        <select name=pacote>
          <option value="" disabled selected>Escolha uma opção</option>
          <option value=almofada>ALMOFADA </option>
          <option value=cincosoldas> 5 SOLDAS </option>
          <option value=fundochato> FUNDO CHATO </option>
          <option value=sachet> SACHET </option>
        </select>
        <BR>
        <BR>

      </div>

      <button type="button" >Retornar</button>
      <button type="button" >Avançar</button>

    </div>

    <div >

      <div >
        <B>Adicionar uma Enfardadora a linha?  </B><br>
        <select name=enfardadora>
          <option value="" disabled selected>Escolha uma opção</option>
          <option value=sim>Sim</option>
          <option value=nao>Não</option>
        </select>
        <BR>
        <BR>

      </div>

      <button type="button" >Retornar</button>
      <button type="submit" >Definir Equipamento </button>

    </div>


  </form>
</div>
</section>

Page link：https//www.codepudding.com/Softwaredesign/310119.html

Prev:React Native - 2 Decimal Places
Next:update nested value in object of objects with keys in javascript
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding