0

tengo este formulario sencillo donde quiero que los datos recogidos se impriman por pantalla al darle al botón enviar, el problema es que al darle a enviar no hace nada no ocurre ningun tipo de reaccion, solo he sido capaz de enviar los datos a través de un alert y a través de console log. Dicho esto paso aqui el codigo de javascript tanto html como el script para ver que estoy haciendo mal.

html:

<!DOCTYPE HTML>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Formulario</title>
    <script async type="text/javascript" src="js.js"></script>
</head>
<body>
    <!-- El formulario usa un controlador de eventos onsubmit para llamar a la función results (). La palabra clave return asegura que el valor devuelto por results () determinará si se envía el formulario.-->
    <form onsubmit="return result();" >
        <h2>Escribe un nombre</h2>
        <input id="name" type="text" name="name"/>

        <h2>Tienes un email</h2>
        <label><input type="checkbox" id="cbox1" value="first_checkbox"> SI</label><br>
        <input type="checkbox" id="cbox2" value="second_checkbox"> <label for="cbox2">NO</label>

        <h3>Te gusta mi pagina web</h3>

        <input id="poll1" type="radio" name="website_poll" value="me_encanta"> Me encanta<br/>
        
        <input id="poll1" type="radio" name="website_poll" value="sin_comentarios"> ni fu ni fa<br/>

        <input id="poll1" type="radio" name="website_poll" value="la_odio">La odio<br/>

        <h3>Deja un comentario</h3>

        <textarea id="comments" name="comments" rows="6" colls="40">Aqui tu mensaje</textarea>
        <br/>
        <br/>

        <input id="submit" type="submit" value="Envia tu informacion"/>
    </form>

</body>
</html>

Script:

function result(){
    //Las variables son iguales a lo que escriba el usuario como respuesta a nuestro formulario. Llamamos al nombre de identificación que creó en el paso anterior y le tomamos el valor.
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;

    if (document.getElementById('poll1').checked){
        poll = document.getElementById('poll1').value;
    } else if(document.getElementById('poll2').checked){
        poll = document.getElementById('poll2').value;
    } else {
        poll = document.getElementById('poll3').value;
    }

    var comments = document.getElementById('comments').value;

    document.write("Gracias por participar");
    
    document.write(name + "<br/>");
    document.write(email + "<br/>");
    document.write(poll + "<br/>");
    document.write(comments + "<br/>");
}
3
  • En la función result() agrega como última línea return false; para evitar el proceso normal de formulario, así no se recarga la página y puedes ver los resultados, aunque document.write() no me parece la mejor opción.
    – Triby
    el 19 ene. 2021 a las 19:33
  • @Triby y que utilizarías?
    – user204018
    el 20 ene. 2021 a las 16:40
  • Creo que lo mejor es tener un contenedor previamente creado y agregar los resultados con appendChild() o, cuando menos, con innerHTML.
    – Triby
    el 20 ene. 2021 a las 17:02

1 respuesta 1

2

Creo que lo que sucede es que se dispara el evento submit. Debes prevenir que se dispare. Debes agregar event.preventDefault()

<form onsubmit="event.preventDefault(); result();">

<!DOCTYPE HTML>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <title>Formulario</title>
</head>

<body>
  <!-- El formulario usa un controlador de eventos onsubmit para llamar a la función results (). La palabra clave return asegura que el valor devuelto por results () determinará si se envía el formulario.-->
  <form onsubmit="event.preventDefault(); result();">
    <h2>Escribe un nombre</h2>
    <input id="name" type="text" name="name" />

    <h2>Tienes un email</h2>
    <label><input type="checkbox" id="cbox1" value="first_checkbox"> SI</label><br>
    <input type="checkbox" id="cbox2" value="second_checkbox"> <label for="cbox2">NO</label>

    <h3>Te gusta mi pagina web</h3>

    <input id="poll1" type="radio" name="website_poll" value="me_encanta"> Me encanta<br />

    <input id="poll2" type="radio" name="website_poll" value="sin_comentarios"> ni fu ni fa<br />

    <input id="poll3" type="radio" name="website_poll" value="la_odio">La odio<br />

    <h3>Deja un comentario</h3>

    <textarea id="comments" name="comments" rows="6" colls="40">Aqui tu mensaje</textarea>
    <br />
    <br />

    <button type="submit" onclick="result">Envia tu informacion</button>
  </form>
  <script>
    function result() {
      //Las variables son iguales a lo que escriba el usuario como respuesta a nuestro formulario. Llamamos al nombre de identificación que creó en el paso anterior y le tomamos el valor.
      var name = document.getElementById('name').value;
      // var email = document.getElementById('email').value;

      if (document.getElementById('poll1').checked) {
        poll = document.getElementById('poll1').value;
      } else if (document.getElementById('poll2').checked) {
        poll = document.getElementById('poll2').value;
      } else {
        poll = document.getElementById('poll3').value;
      }

      var comments = document.getElementById('comments').value;

      document.write("Gracias por participar");

      document.write(name + "<br/>");
      // document.write(email + "<br/>");
      document.write(poll + "<br/>");
      document.write(comments + "<br/>");
      return false;
    }
  </script>
</body>

</html>

Tu Respuesta

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