Javascript dynamic form

Question

I have a project where the form has to be dynamic, for example when filling name and age appears other fields like the address and so on, I would like some tip on how to do this with javascript/jquery .

<div id="main">
    <form action="">
        <p><strong>Nome: </strong><input type="text"></p>
        <p><strong>Idade: </strong><input type="text"></p>
        <p><strong>Estado: </strong><input type="text"></p>
        <p><strong>Data de Nascimento: </strong><input type="date"></p>
        <button id="proximo">Próximo</button><br>       
    </form>
</div><br>

<div id="teste"></div>
<script>

    var btn = $('#proximo');
    var teste = $('#teste');

    btn.on('click', function() {
      $(this).hide();
      teste.load('parte2.html #teste2 p', completeFunction);
    });

    function completeFunction(responseText, textStatus, request) {
      if(textStatus == 'error') {
          teste.text('Ocorreu um erro: ' +  request.status + ' ' + request.statusText);
      } 
    } 
</script>

Answer 1

An example of what you want

Script

var currentTab = 0;
showTab(currentTab);

function showTab(n) {

  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";

  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }

  fixStepIndicator(n)
}

function nextPrev(n) {

  var x = document.getElementsByClassName("tab");

  if (n == 1 && !validateForm()) return false;

  x[currentTab].style.display = "none";

  currentTab = currentTab + n;

  if (currentTab >= x.length) {

    document.getElementById("regForm").submit();
    return false;
  }

  showTab(currentTab);
}

function validateForm() {

  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");

  for (i = 0; i < y.length; i++) {

    if (y[i].value == "") {

      y[i].className += " invalid";

      valid = false;
    }
  }

  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; 
}

function fixStepIndicator(n) {

  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }

  x[n].className += " active";
}

/******CSS*******/

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  font-family: Raleway;
  padding: 10px;
  width: 300px;

}

h1 {
  text-align: center;  
}

input {

}

/* Marca as caixas de entrada que recebem um erro na validação: */
input.invalid {
  background-color: #ffdddd;
}

/* Esconda todas as etapas por padrão: */
.tab {
  display: none;
}

button {
  background-color: #4CAF50;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* círculos que indicam as etapas do formulário: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Marca as etapas concluídas e válidas: */
.step.finish {
  background-color: #4CAF50;
}

<!-- HTML -->

<form id="regForm" action="/unanswered">
  <h1>Registrar</h1>
  <!-- Uma "div" para cada etapa do formulário. Pode colocar mais elementos -->
  <div class="tab">Nome:
    <p><input placeholder="Nome..." oninput="this.className = ''" name="nome"></p>
  </div>
  <div class="tab">Idade:
    <p><input placeholder="Idade..." oninput="this.className = ''" name="idade"></p>
  </div>
  <div class="tab">Local de nascimento:
    <p>Estado <input placeholder="Estado..." oninput="this.className = ''" name="estado"> 
    <p>Cidade <input placeholder="Cidade..." oninput="this.className = ''" name="cidade"></p>
  </div>
  <div class="tab">Data de Nascimento:
    <p><input placeholder="Data de Nascimento..." oninput="this.className = ''" name="nascimento"></p>
  </div>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Anterior</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Proxima</button>
    </div>
  </div>
  <!-- Círculos que indicam as etapas do formulário: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>