0

Estoy haciendo un formulario que va cambiando el entre distintos div a medida que se clickea en next.

El problema es que, si bien este cambia al siguiente div, el formulario regresa al div de la posicion 0 de forma automatica (cambia el display del css entre none y block).

 <div class="car-container" id="card-container">
  <div class="form-one" id="one">
    <h3>Personal information</h3>
    <form action="">
      <input type="text" placeholder="name"><br/>
      <input type="text" placeholder="lastnane" name="" id=""><br/>
      <button id="next">next</button>
    </form>
  </div>
    <div class="form-two" id="two">
    <h3>Address</h3>
    <form action="">
      <input type="text" placeholder="City"><br/>
      <input type="text" placeholder="Address" name="" id=""><br/>
      <button id="save">save</button>
    </form>
  </div>
</div>

Js:

const card_container = document.getElementById('card-container');
const one = document.getElementById('one');
const two = document.getElementById('two');
const next = document.getElementById('next');

next.addEventListener('click', () => {
  let elements_array = [one, two];

   let current_pos = 0;
   elements_array[current_pos].style.display = 'block';

   let next_pos = current_pos + 1;

   if(next_pos) {
   elements_array[next_pos].style.display = 'block';
  }
});

css:

.car-container {
  border: lightgray .7px solid;
  width: max-content;
  padding: .5rem;
  height: 300px;
}

.form-one {
  display: block;
}

.form-two {
  display: none;
}

input[type="text"] {
  margin-bottom: .7rem;
}
1
  • Un buen título en la pregunta, llamaría la atención de más usuarios que deseen ayudar... Commented el 28 ene. 2020 a las 18:38

1 respuesta 1

1

El problema es que la forma se postea cuando haces click. Puedes prevenirlo con preventDefault() asi:

const card_container = document.getElementById('card-container');
const one = document.getElementById('one');
const two = document.getElementById('two');
const next = document.getElementById('next');

next.addEventListener('click', (e) => {
  e.preventDefault();
  let elements_array = [one, two];

   let current_pos = 0;
   elements_array[current_pos].style.display = 'block';

   let next_pos = current_pos + 1;

   if(next_pos) {
   elements_array[next_pos].style.display = 'block';
  }
});
.car-container {
  border: lightgray .7px solid;
  width: max-content;
  padding: .5rem;
  height: 300px;
}

.form-one {
  display: block;
}

.form-two {
  display: none;
}

input[type="text"] {
  margin-bottom: .7rem;
}
<div class="car-container" id="card-container">
  <div class="form-one" id="one">
    <h3>Personal information</h3>
    <form action="">
      <input type="text" placeholder="name"><br/>
      <input type="text" placeholder="lastnane" name="" id=""><br/>
      <button id="next">next</button>
    </form>
  </div>
    <div class="form-two" id="two">
    <h3>Address</h3>
    <form action="">
      <input type="text" placeholder="City"><br/>
      <input type="text" placeholder="Address" name="" id=""><br/>
      <button id="save">save</button>
    </form>
  </div>
</div>

1
  • 1
    @alancfm jaja como no lo vi, sos un genio. gracias!
    – Richi
    Commented el 28 ene. 2020 a las 18:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.