1

al dar a siguiente en el formulario, recarga la pagina, y en el segundo click ya funciona, siempre se comporta asi igual. Aca veo que no funciona, pero en el navegador tiene el comportamiento que describo mas arriba. Agradezco de antemano. Buenas, no encuentro la falla, al dar a siguiente en el formulario, recarga la pagina, y en el segundo click ya funciona, siempre se comporta asi igual. Aca veo que no funciona, pero en el navegador tiene el comportamiento que describo mas arriba. Agradezco de antemano.

const movPag = document.querySelector(".movPag");
const pagina = document.querySelector(".pagina");
const pagina2 = document.querySelector(".pagina2");
const pagina3 = document.querySelector(".pagina3");

const BotonAvance1 = document.querySelector(".avanzarpag1");
const BotonVolver0 = document.querySelector(".retrocederpag0");
const BotonVolver1 = document.querySelector(".retrocederpag1");
const BotonAvance2 = document.querySelector(".avanzarpag2");

BotonAvance1.addEventListener("click", function () {
    movPag.style.display = "none";
    pagina2.style.display = "block";
});

BotonAvance2.addEventListener("click", function () {
    let nombreEmpresa = document.getElementById("nombreEmpresa").textContent;
    let fechaEntrega = document.getElementById("fechaEntrega").textContent;
    let nombreyapellido = document.getElementById("nombreyapellido").textContent;
    let mail = document.getElementById("email").textContent;
    movPag.style.display = "none";
    pagina.style.display = "none";
    pagina2.style.display = "none";
    pagina3.style.display = "block";
    document.querySelector(".span1").innerHTML = nombreEmpresa;
    document.querySelector(".span2").innerHTML = fechaEntrega;
    document.querySelector(".span3").innerHTML = nombreyapellido;
    document.querySelector(".span4").innerHTML = mail;
});

BotonVolver0.addEventListener("click", function () {
    pagina2.style.display = "none";
    movPag.style.display = "block";
});
BotonVolver1.addEventListener("click", function () {
    pagina2.style.display = "block";
    pagina3.style.display = "none";
});
.container {
  text-align: center;
  margin: auto;
  width: 30%;
  background: linear-gradient(30deg, var(--color-violeta) 0%, var(--color-azul) 48.96%, var(--color-verde) 100%);
  text-align: center;
  border-radius: 20px;
  padding: 2rem;
  margin-top: 2rem;
}
form{
  margin-top: 2rem;
}
.pagina2 {
  display: none;
}
.pagina3 {
  display: none;
}

/* BOTONES */
.botonSiguiente{
  background: var(--color-verde);
}
.botonAnterior{
  background: none;
  border: 1px var(--color-verde) solid;
}
.botonAnterior a{
  color: var(--color-grisclaro);
}

/* FORMULARIO */
.subtitulo{
  font-size: 2rem;
  color: var(--color-background);
}
.campo{
  padding: 1rem;
}
.campo input{
  height: 24px;
  border: 1px black solid;
}
.campo select{
  height: 28px;
  width: 100%;
  padding-right: 1rem;
}
.inputsFormulario{
  width: 92%;
  border-radius: 20px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 0.5rem;
}

@media (max-width: 1200px) {
  .container{
    width: 50%;
  }
}
@media (max-width: 768px) {
  .container{
    width: 96%;
  }
}
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Asistente  </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Solicitud de presupuesto</h1>
        <div class="formulario-principal">

            <form action="#" name="wizard">
                <!-- Página 1  -->
                <div class="pagina movPag">
                    <h2 class="subtitulo">Información básica</h2>
                    <div class="campo">
                        <label>Nombre de su empresa</label>
                        <input type="text" id="nombreEmpresa" class="inputsFormulario" />
                    </div>
                  
                    <div class="campo">
                        <label>Fecha de entrega aproximada</label>
                        <input type="date" id="fechaEntrega" class="inputsFormulario" />
                    </div>
                    <div class="campo">
                        <button class="boton botonAnterior">
                            <a href="../index.html">Volver a Home</a>
                        </button>
                        <button class="avanzarpag1 siguiente boton botonSiguiente">
                            Siguiente
                        </button>
                    </div>
                </div>

                <!-- Página 2  -->
                <div class="pagina pagina2">
                    <h2 class="subtitulo">Informacion de contacto</h2>
                    <div class="campo">
                        <label>Nombre y apellido</label>
                        <input type="text" id="nombreyapellido" class="inputsFormulario" />
                    </div>
                    <div class="campo">
                        <label>E-mail</label>
                        <input type="text" id="email" class="inputsFormulario" />
                    </div>
                    <div class="campo">
                        <button class="retrocederpag0 anterior boton botonAnterior">
                            Anterior
                        </button>
                        <button class="avanzarpag2 siguiente boton botonSiguiente">
                            Siguiente
                        </button>
                    </div>
                </div>
                <div class="pagina pagina3">
                    <h2 class="subtitulo">Gracias, Nos contactaremos a la bravedad</h2>
                    <h3>Resumen</h3>
                    <br><br>

                    <span class="span1"></span>
                    <br><br>

                    <span class="span2"></span>
                    <br><br>

                    <span class="span3"></span>
                    <br><br>

                    <span class="span4"></span>
                    <br><br>

                    <button class="retrocederpag1 anterior boton botonAnterior">Anterior</button>
                    <button class="boton botonAnterior">
                        <a href="../index.html">Cerrar</a>
                    </button>
                    <button class="boton" onclick="crearPdf()">Crear PDF</button>
                </div>
            </form>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

1 respuesta 1

1

Sucede que ocurre el evento por defecto del submit, ya que cuando un botón está dentro de un formulario, su comportamiento predeterminado es enviar ese formulario a la URL, en donde hace que la página se recargue. Entonces, puedes evitarlo agregando un parámetro a tu función (que será ese evento que ocurre en tu botón) y utilizar el método preventDefault() en todos tus listener:

BotonAvance1.addEventListener("click", function (event) {
  event.preventDefault();
  movPag.style.display = "none";
  pagina2.style.display = "block";
});

Ejemplo:

const movPag = document.querySelector(".movPag");
const pagina = document.querySelector(".pagina");
const pagina2 = document.querySelector(".pagina2");
const pagina3 = document.querySelector(".pagina3");

const BotonAvance1 = document.querySelector(".avanzarpag1");
const BotonVolver0 = document.querySelector(".retrocederpag0");
const BotonVolver1 = document.querySelector(".retrocederpag1");
const BotonAvance2 = document.querySelector(".avanzarpag2");

BotonAvance1.addEventListener("click", function (event) {
  event.preventDefault();
  movPag.style.display = "none";
  pagina2.style.display = "block";
});

BotonAvance2.addEventListener("click", function (event) {
  event.preventDefault();
  let nombreEmpresa = document.getElementById("nombreEmpresa").textContent;
  let fechaEntrega = document.getElementById("fechaEntrega").textContent;
  let nombreyapellido = document.getElementById("nombreyapellido").textContent;
  let mail = document.getElementById("email").textContent;
  movPag.style.display = "none";
  pagina.style.display = "none";
  pagina2.style.display = "none";
  pagina3.style.display = "block";
  document.querySelector(".span1").innerHTML = nombreEmpresa;
  document.querySelector(".span2").innerHTML = fechaEntrega;
  document.querySelector(".span3").innerHTML = nombreyapellido;
  document.querySelector(".span4").innerHTML = mail;
});

BotonVolver0.addEventListener("click", function (event) {
  event.preventDefault();
  pagina2.style.display = "none";
  movPag.style.display = "block";
});
BotonVolver1.addEventListener("click", function (event) {
  event.preventDefault();
  pagina2.style.display = "block";
  pagina3.style.display = "none";
});
.container {
  text-align: center;
  margin: auto;
  width: 30%;
  background: linear-gradient(30deg, var(--color-violeta) 0%, var(--color-azul) 48.96%, var(--color-verde) 100%);
  text-align: center;
  border-radius: 20px;
  padding: 2rem;
  margin-top: 2rem;
}
form{
  margin-top: 2rem;
}
.pagina2 {
  display: none;
}
.pagina3 {
  display: none;
}

/* BOTONES */
.botonSiguiente{
  background: var(--color-verde);
}
.botonAnterior{
  background: none;
  border: 1px var(--color-verde) solid;
}
.botonAnterior a{
  color: var(--color-grisclaro);
}

/* FORMULARIO */
.subtitulo{
  font-size: 2rem;
  color: var(--color-background);
}
.campo{
  padding: 1rem;
}
.campo input{
  height: 24px;
  border: none;
}
.campo select{
  height: 28px;
  width: 100%;
  padding-right: 1rem;
}
.inputsFormulario{
  width: 92%;
  border-radius: 20px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 0.5rem;
}

@media (max-width: 1200px) {
  .container{
    width: 50%;
  }
}
@media (max-width: 768px) {
  .container{
    width: 96%;
  }
}
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Asistente  </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>Solicitud de presupuesto</h1>
      <div class="formulario-principal">

        <form action="#" name="wizard">
          <!-- Página 1  -->
          <div class="pagina movPag">
            <h2 class="subtitulo">Información básica</h2>
            <div class="campo">
              <label>Nombre de su empresa</label>
              <input type="text" id="nombreEmpresa" class="inputsFormulario" />
            </div>

            <div class="campo">
              <label>Fecha de entrega aproximada</label>
              <input type="date" id="fechaEntrega" class="inputsFormulario" />
            </div>
            <div class="campo">
              <button class="boton botonAnterior">
                <a href="../index.html">Volver a Home</a>
              </button>
              <button class="avanzarpag1 siguiente boton botonSiguiente">
                Siguiente
              </button>
            </div>
          </div>

          <!-- Página 2  -->
          <div class="pagina pagina2">
            <h2 class="subtitulo">Informacion de contacto</h2>
            <div class="campo">
              <label>Nombre y apellido</label>
              <input type="text" id="nombreyapellido" class="inputsFormulario" />
            </div>
            <div class="campo">
              <label>E-mail</label>
              <input type="text" id="email" class="inputsFormulario" />
            </div>
            <div class="campo">
              <button class="retrocederpag0 anterior boton botonAnterior">
                Anterior
              </button>
              <button class="avanzarpag2 siguiente boton botonSiguiente">
                Siguiente
              </button>
            </div>
          </div>
          <div class="pagina pagina3">
            <h2 class="subtitulo">Gracias, Nos contactaremos a la bravedad</h2>
            <h3>Resumen</h3>
            <br><br>

            <span class="span1"></span>
            <br><br>

            <span class="span2"></span>
            <br><br>

            <span class="span3"></span>
            <br><br>

            <span class="span4"></span>
            <br><br>

            <button class="retrocederpag1 anterior boton botonAnterior">Anterior</button>
            <button class="boton botonAnterior">
              <a href="../index.html">Cerrar</a>
            </button>
            <button class="boton" onclick="crearPdf()">Crear PDF</button>
          </div>
        </form>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

5
  • Mil gracias! sos un crack!! desconocía completamente ese comportamiento. Gracias por enseñarme! Commented el 12 abr. 2023 a las 22:21
  • Me alegro, recuerda verificar la respuesta marcándole al ✔️ si te sirvió para que tu pregunta esté como respondida, saludos. Commented el 12 abr. 2023 a las 22:22
  • Te consulto, el botón es un botón común, porque dispara el evento submit? Tenés algún link donde pueda leer? No he encontrado. Commented el 13 abr. 2023 a las 16:15
  • 1
    Por que es el evento por defecto que tiene un <button> cuando está dentro de un <form>, y para evitarlo es con preventDefault(). stackoverflow.com/questions/932653/… Commented el 14 abr. 2023 a las 13:24
  • 1
    Muchísimas gracias! Commented el 15 abr. 2023 a las 22:20

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.