0

Muy buenas, este es mi primer post asi que espero no estar metiendo la pata,

Os presento la duda que me ocurre:

Tengo un formulario HTML y mediante javascript tengo que comprobar que los datos están completos antes de hacer submit.

Por otro lado me gustaría recoger esos datos introducidos en el formulario e imprimirlos en pantalla con otra función que se dispare con el evento onclick del botón submit, pero tengo un problema y es que el evento del submit me refresca automáticamente la página y los datos me duran una micra de segundo en la pagina y después vuelven a desaparecer... Os pego código:

Este es el código HTML

<div id="divformulario">
  <form id="formulario" name="form1" action="" method="get">
     <div id="divnombre">
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" placeholder="Introduce tu nombre">
     </div>
     <div id="divhorario">
        <input type="radio" id="mañana" class="horario" name="horario" value="Mañana">
        <label for="mañana">Mañana</label>
        <input type="radio" id="tarde" class="horario" name="horario" value="Tarde">
        <label for="tarde">Tarde</label>
     </div>
     <div id="divnormas">
        <input type="checkbox" id="normas" name="normas" value="normas">
        <label for="normas">Acepto las normas de uso</label>
     </div>
     <div id="botones">
        <input id="enviarForm" type="submit" value="Enviar Formulario" name="botonEnvio" onclick="validarForm(); imprimirResultado();"/>
     </div>
  </form>
</div>
<div id="divresultado">
  <h4>Datos introducidos: </h4>
  <p>El nombre introducido es: <p id="nombreResultado"></p></p> 
  <p>El horario introducido es: <p id="horarioResultado"></p></p> 
  <p>¿Se han aceptado las normas?: <p id="normasResultado"></p></p> 
</div>

Por otro lado tengo la función que me imprime tal que así:

function imprimirResultado(evento) {

    let divResultado = document.getElementById("divresultado");
    let nombre = document.form1.nombre.value;
    let horario = document.form1.horario.value;
    let normas = document.form1.normas.checked;
    (normas == true) ? normas = "SI" : normas = "NO";

    alert(nombre);
    alert(horario);
    alert(normas);


    document.getElementById("nombreResultado").innerHTML = nombre;
    document.getElementById("horarioResultado").innerHTML = horario;
    document.getElementById("normasResultado").innerHTML = normas;
}

Y también he probado con esta otra:

function imprimirResultado(evento) {

    let divResultado = document.getElementById("divresultado");
    let nombre = document.form1.nombre.value;
    let horario = document.form1.horario.value;
    let normas = document.form1.normas.checked;
    (normas == true) ? normas = "SI" : normas = "NO";

    alert(nombre);
    alert(horario);
    alert(normas);

    
    let parrafo0 = document.createElement("br");
    let parrafo1 = document.createElement("p");
    let parrafo2 = document.createElement("p");
    let parrafo3 = document.createElement("p");
    parrafo1.textContent = `El nombre introducido es: ${nombre}`;
    parrafo2.textContent = `El horario introducido es: ${horario}`;
    parrafo3.textContent = `¿Se han aceptado las normas?: ${normas}`;
    document.getElementById("divresultado").appendChild(parrafo1);
    document.getElementById("divresultado").appendChild(parrafo0);
    document.getElementById("divresultado").appendChild(parrafo2);
    document.getElementById("divresultado").appendChild(parrafo0);
    document.getElementById("divresultado").appendChild(parrafo3);

    

}

Pero nada, ninguna de las dos hace persistente el dato en pantalla, con ambas funciones los datos se borran al instante con el refresco de pantalla... alguna sugerencia??

1
  • Ahora puedes aceptar la respuesta que más te fue útil con ✓ el 19 nov. 2022 a las 3:36

3 respuestas 3

0

Se me ha ocurrido una idea: que el botón submit del formulario no envíe nada sino que se muestre en un modal los resultados.

Ahora en el modal aparece el botón de submit para enviar. Es la forma mas fácil de lograr sin complicaciones.

El modal es básico de HTML. Se puede implementar Bootstrap o SweetAlert pero bueno...

const ver = document.getElementById("ver");
const formulario = document.getElementById("formulario");
const submit = document.getElementById("submit");
const modal = document.querySelector("dialog");

function imprimirResultado(e) {

    e.preventDefault();
    modal.showModal(); // ABRIR MODAL

    let divResultado = document.getElementById("divresultado");
    let nombre = document.form1.nombre.value;
    let horario = document.form1.horario.value;
    let normas = document.form1.normas.checked;
    (normas == true) ? normas = "SI" : normas = "NO";

    document.getElementById("nombreResultado").innerHTML = nombre;
    document.getElementById("horarioResultado").innerHTML = horario;
    document.getElementById("normasResultado").innerHTML = normas;
}

ver.addEventListener("click", (e) => imprimirResultado(e) ); // PARA ABRIR MODAL

submit.addEventListener("click", (e) => { // ENVIAR FORMULARIO
    e.preventDefault();
    formulario.submit(); // ENVIAR
});
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0
}

body {
    height: 100%
}

#divformulario {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 5rem 5rem
}

dialog {
    margin: auto;
    padding: 0;
    border: 0
}

dialog #divresultado {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 50vw;
    margin: auto;
    background: #ccc
}

dialog .botonera {
    display: inline-flex;
    justify-content: center;
    width: 50vw;
    height: 50px;
    margin: auto;
    background-color: #777
} dialog .botonera button {
    margin: auto;
    padding: 5px 10px;
    border: 1px solid #123;
    border-radius: 5px;
    color: #fff
} dialog .botonera .submit {
    background-color: rgba(0,128,0,0.3)
} dialog .botonera .cerrar {
    background-color: rgba(128,0,0,0.3)
}
<div id="divformulario">
        <form id="formulario" name="form1" action="" method="get">
           <div id="divnombre">
              <label for="nombre">Nombre:</label>
              <input type="text" id="nombre" name="nombre" placeholder="Introduce tu nombre">
           </div>
           <div id="divhorario">
              <input type="radio" id="mañana" class="horario" name="horario" value="Mañana">
              <label for="mañana">Mañana</label>
              <input type="radio" id="tarde" class="horario" name="horario" value="Tarde">
              <label for="tarde">Tarde</label>
           </div>
           <div id="divnormas">
              <input type="checkbox" id="normas" name="normas" value="normas">
              <label for="normas">Acepto las normas de uso</label>
           </div>
           <div id="botones">
              <button id="ver">Verificar</button>
           </div>
        </form>
      </div>
      
      <!-- MODAL PARA VISUALIZAR -->
      <dialog id="dialog">
          
          <div id="divresultado">

            <h4>Datos introducidos: </h4>
            <p>El nombre introducido es: <b id="nombreResultado"></b></p> 
            <p>El horario introducido es: <b id="horarioResultado"></b></p> 
            <p>¿Se han aceptado las normas?: <b id="normasResultado"></b></p>

            <div class="botonera">
                <button class="submit" id="submit">Enviar</button> <!-- BOTÓN ENVIAR -->
                <button class="cerrar" onclick="dialog.close()">Cerrar</button> <!-- CERRAR MODAL -->
            </div>

          </div>

      </dialog>

2
  • Gracias esta respuesta se acerca mucho más a lo que ando buscando... veo que no hay ninguna forma de hacerlo fácil, sino que hay que dar un par de vueltas para saltarse el refresco del submit... Gracias!! el 19 nov. 2022 a las 4:09
  • Ok, puedes aceptar la respuesta ? el 19 nov. 2022 a las 4:16
0

Si tu deseo no es enviar los datos a ningun lado, puedes simplemente cambiar tu botón de tipo submit a tipo button.

function validarForm(){
}

function imprimirResultado(evento) {

    let divResultado = document.getElementById("divresultado");
    let nombre = document.form1.nombre.value;
    let horario = document.form1.horario.value;
    let normas = document.form1.normas.checked;
    (normas == true) ? normas = "SI" : normas = "NO";

    alert(nombre);
    alert(horario);
    alert(normas);


    document.getElementById("nombreResultado").innerHTML = nombre;
    document.getElementById("horarioResultado").innerHTML = horario;
    document.getElementById("normasResultado").innerHTML = normas;
}
<div id="divformulario">
  <form id="formulario" name="form1" action="" method="get">
     <div id="divnombre">
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" placeholder="Introduce tu nombre">
     </div>
     <div id="divhorario">
        <input type="radio" id="mañana" class="horario" name="horario" value="Mañana">
        <label for="mañana">Mañana</label>
        <input type="radio" id="tarde" class="horario" name="horario" value="Tarde">
        <label for="tarde">Tarde</label>
     </div>
     <div id="divnormas">
        <input type="checkbox" id="normas" name="normas" value="normas">
        <label for="normas">Acepto las normas de uso</label>
     </div>
     <div id="botones">
        <input id="enviarForm" type="button" value="Enviar Formulario" name="botonEnvio" onclick="validarForm(); imprimirResultado();"/>
     </div>
  </form>
</div>
<div id="divresultado">
  <h4>Datos introducidos: </h4>
  <p>El nombre introducido es: <p id="nombreResultado"></p></p> 
  <p>El horario introducido es: <p id="horarioResultado"></p></p> 
  <p>¿Se han aceptado las normas?: <p id="normasResultado"></p></p> 
</div>

1
  • Ya... valoré esa opción pero necesito que sea de tipo submit para poder enviar los datos después... el 19 nov. 2022 a las 2:10
0

Al final de la función imprimirResultado() pone un return, false; y en el HTML probá poner en el input el return también. Espero que te sirva.

<input 
  id="enviarForm"
  name="botonEnvio"  
  onclick="validarForm(); return imprimirResultado();"
  type="button"
  value="Enviar Formulario" 
/>
   
1
  • Esta es buena, solo que no consigo mandar con el submit por get los datos introducidos en el formulario... si que imprime los datos guay en la página pero pierdo el submit.... el 19 nov. 2022 a las 3:56

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.