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... 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! el 28 ene. 2020 a las 18:45

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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