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/>");
}
result()
agrega como última líneareturn false;
para evitar el proceso normal de formulario, así no se recarga la página y puedes ver los resultados, aunquedocument.write()
no me parece la mejor opción.appendChild()
o, cuando menos, coninnerHTML
.