0

En este ejercicio debo recibir datos de un formulario y luego, mostrar lo recibido en la consola. El problema ocurre cuando trato de guardar en variables los datos para mostrarlos y simplemente no lo hace.

Aqui el codigo JS

window.addEventListener("load", function () {
    console.log("DOM cargado");
    var form = this.document.getElementById("formulario")
    var nombre = this.document.querySelector("#nombre").value;
    var apellido = this.document.querySelector("#apellido").value;
    var edad = this.document.querySelector("#edad").value;
    form.addEventListener("submit", () => {
        console.log("Evento submit capturado");
        console.log("El nombre es: " + nombre);
        console.log("El apellido es: " + apellido);
        console.log("La edad es: " + edad);
        
    })
});
1
  • ¿Cuál es el código HTML? También esta mal lo que estas haciendo. Estas capturando los valores de los elementos que buscas cuando el "DOM" carga. Por lo tanto, cuando, realmente se recibe el submit del form, los valores que tiene son los mismos que tenía al cargarse la página (vacíos). ¿Has intentado mover las lineas de apellido, nombre y edad, dentro del event listener del submit?
    – Jacobo
    Commented el 27 jul. 2021 a las 21:54

2 respuestas 2

1

Es que tienes el código un poco desordenado y te falta anular el comportamiento por defecto (event.preventDefault() )
Los datos del formulario tienes que leerlos dentro de la función que gestiona el evento submit, tal como lo tienes ahora los datos son leídos en el momento de cargar el documento, cuando aún están vacíos.

window.addEventListener("load", function () {
    console.log("DOM cargado");
    var form = this.document.getElementById("formulario")
    form.addEventListener("submit", () => {
        event.preventDefault();        
        var nombre = this.document.querySelector("#nombre").value;
        var apellido = this.document.querySelector("#apellido").value;
        var edad = this.document.querySelector("#edad").value;
        console.log("Evento submit capturado");
        console.log("El nombre es: " + nombre);
        console.log("El apellido es: " + apellido);
        console.log("La edad es: " + edad);
        
    })
});
<form id="formulario">
<input id="nombre" type="text">
<input id="apellido" type="text">
<input id="edad" type="text">
<button type="submit" value="Enviar" id="submit" >Enviar</button>
</form>

0

Un ejemplo mínimo funcional con los campos que indicas podría ser:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="formulario">
        <input type="text" id="nombre" placeholder="Nombre">
        <input type="text" id="apellido" placeholder="Apellido">
        <input type="number" step="1" id="edad" placeholder="Edad">

        <input type="submit" value="Enviar">
    </form>

    <script>
        window.onload = () => {
            console.log("DOM cargado");

            const formNode = document.getElementById("formulario");
            formNode.addEventListener("submit", (ev) =>
            {
                ev.preventDefault();
                console.log("Evento submit capturado");

                const apellido = document.getElementById("apellido").value;
                const edad   = document.getElementById("edad").value;
                const nombre = document.getElementById("nombre").value;

                console.log("El nombre es: " + nombre);
                console.log("El apellido es: " + apellido);
                console.log("La edad es: " + edad);
            })
        };
    </script>
</body>
</html>

Los datos de los diferentes elementos del formulario se obtiene una vez efectuado el "submit", este evento se cancela para tratar estos datos ev.preventDefault(); seguidamente enviarías el formulario: formNode.submit();.

Si tienes los IDs de los diferentes campos la forma más directa de obtener los nodos es con: document.getElementById('id_name') otra forma válida sería document.querySelector('#id_name') o mejor indicando el elemento HTML: document.querySelector('input#id_name').

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.