0

En este código se intenta incorporar un evento submit desde la función validarFormulario pero no hace nada... al parecer funciona bien pero trato de que aparezca por consola algo y no logro aún comprender... pensé que era que no existía el id en el HTML pero si existe y lo que deseo es que los datos que introduzca el usuario aparezcan en el DOM o al menos por consola

const categoria = ["REMERAS", "JEANS","VESTIDOS"];

class Producto {
    constructor(codigo, nombre, precio, categoria){
        this.codigo = parseInt(codigo);
        this.nombre = nombre;
        this.precio =(precio);
        this.categoria = categoria;
    }
}

const productos = [];
productos.push(new Producto(0001,"Remera Básica", 1500, categoria[0]));
productos.push(new Producto(0002," Remera Denim", 1700, categoria[0]));
productos.push(new Producto(1001,"Jean Clásico", 5000, categoria[1]));
productos.push(new Producto(1002,"Jean Oxford", 6800, categoria[1]));
productos.push(new Producto(2001,"Vestido Corto", 3500, categoria[2]));
productos.push(new Producto(2002, "Vestido Largo", 5560, categoria[2]));

console.log(productos);

let divProd= document.getElementById("productos");

for (const producto of productos) {
        let divProducto= document.createElement("div");
        divProducto.innerHTML=`<h2>Producto: ${producto.nombre}</h2>
                                <h2>Precio: $ ${producto.precio} </h2>
                                <button>Comprar</button><hr> `;        
        divProd.append(divProducto);
}

/*-------------HTML CONTACTO   array + evento -------------*/

class Contactos{
    constructor(nombre,email,telefono){
        this.nombre=nombre.toUpperCase();
        this.email=email;
        this.telefono=telefono;
    }
}

const contactos=[];
let datosContactos=document.getElementById('formulario');
datosContactos.addEventListener("submit", validarFormulario);

function validarFormulario(e){
    e.preventDefault();
    console.log("Formulario Enviado");    
}







<!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">

    <!--link css bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

        <!--link css propio-->
    <link rel="stylesheet" href="../CSS/main.css">

    <script src="../JS/main.js"></script>

    <title>CHITA Indumentaria - Contacto</title>
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="../index.html">
                    <img src="../imagenes/logo.png" alt="logo" width="100" height="100"
                        class="d-inline-block align-text-top">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="../index.html">Inicio</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                Productos
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li><a class="dropdown-item" href="../paginas/productos/remeras.html">Remeras</a></li>
                                <li><a class="dropdown-item" href="../paginas/productos/jeans.html">Jeans</a></li>
                                <li><a class="dropdown-item" href="../paginas/productos/vestidos.html">Vestidos</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../paginas/preguntas-frecuentes.html">Preguntas Frecuentes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../paginas/contacto.html">Contacto</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main>
        <form id="formulario">
            <input type="text" placeholder="Nombre y Apellido">
            <input type="text" placeholder="Email">
            <input type="text" placeholder="Teléfono">
            <input type="submit" value="Enviar">
       </form>
      
    </main>
    <footer>
        <div class="p-3 mb-2 bg-secondary text-white">
            <p>aqui ira el pie de pagina</p>
        </div>
    </footer>

    <!--link JS bootstrap-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
</body>

</html>

1 respuesta 1

1

Primeramente agrega a tus inputs el atributo name que identificará los campos del formulario en tu objeto:

<input type="text" placeholder="Nombre y Apellido" name="nombreCompleto">
<input type="text" placeholder="Email" name="email">
<input type="text" placeholder="Teléfono" name="telefono">
<input type="submit" value="Enviar">

Luego modifica tu función validarFormulario para obtener el valor de los campos del form:

function validarFormulario(e){
    e.preventDefault();
    const formData = new FormData(e.target);
    const datos = Object.fromEntries(formData.entries());
    console.log(datos);
    e.target.reset();   // Opcionalmente para borrar el formulario
}

Con eso ya tendrás en la variable datos todo lo que se submite en el formulario. Te adjunto tu ejemplo completo. Ten en cuenta que he agregado un div con el id productos ya que no existía en el html y causaba error en la mitad del script. También trata de poner la etiqueta script al final del body para que evites posibles errores de que se ejecute tu código js antes de que el navegador haya parseado todo el html.

const categoria = ["REMERAS", "JEANS","VESTIDOS"];

class Producto {
    constructor(codigo, nombre, precio, categoria){
        this.codigo = parseInt(codigo);
        this.nombre = nombre;
        this.precio =(precio);
        this.categoria = categoria;
    }
}

const productos = [];
productos.push(new Producto(0001,"Remera Básica", 1500, categoria[0]));
productos.push(new Producto(0002," Remera Denim", 1700, categoria[0]));
productos.push(new Producto(1001,"Jean Clásico", 5000, categoria[1]));
productos.push(new Producto(1002,"Jean Oxford", 6800, categoria[1]));
productos.push(new Producto(2001,"Vestido Corto", 3500, categoria[2]));
productos.push(new Producto(2002, "Vestido Largo", 5560, categoria[2]));

// console.log(productos);

let divProd= document.getElementById("productos");

for (const producto of productos) {
        let divProducto= document.createElement("div");
        divProducto.innerHTML=`<h2>Producto: ${producto.nombre}</h2>
                                <h2>Precio: $ ${producto.precio} </h2>
                                <button>Comprar</button><hr> `;        
        divProd.append(divProducto);
}



/*-------------HTML CONTACTO   array + evento -------------*/

class Contactos{
    constructor(nombre,email,telefono){
        this.nombre=nombre.toUpperCase();
        this.email=email;
        this.telefono=telefono;
    }
}


const contactos=[];
let datosContactos=document.getElementById('formulario');
datosContactos.addEventListener("submit", validarFormulario);

function validarFormulario(e){
    e.preventDefault();
    const formData = new FormData(e.target);
    const datos = Object.fromEntries(formData.entries());
    console.log(datos);
    e.target.reset();   // Opcionalmente para borrar el formulario
}
<!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">

    <!--link css bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

        <!--link css propio-->
    <link rel="stylesheet" href="../CSS/main.css">

    <title>CHITA Indumentaria - Contacto</title>
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="../index.html">
                    <img src="../imagenes/logo.png" alt="logo" width="100" height="100"
                        class="d-inline-block align-text-top">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="../index.html">Inicio</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                Productos
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li><a class="dropdown-item" href="../paginas/productos/remeras.html">Remeras</a></li>
                                <li><a class="dropdown-item" href="../paginas/productos/jeans.html">Jeans</a></li>
                                <li><a class="dropdown-item" href="../paginas/productos/vestidos.html">Vestidos</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../paginas/preguntas-frecuentes.html">Preguntas Frecuentes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../paginas/contacto.html">Contacto</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main>
        <form id="formulario">
            <input type="text" placeholder="Nombre y Apellido" name="nombreCompleto">
            <input type="text" placeholder="Email" name="email">
            <input type="text" placeholder="Teléfono" name="telefono">
            <input type="submit" value="Enviar">
       </form>
       <div id="productos"></div>
      
    </main>
    <footer>
        <div class="p-3 mb-2 bg-secondary text-white">
            <p>aqui ira el pie de pagina</p>
        </div>
    </footer>

    <!--link JS bootstrap-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
        <script src="./script.js"></script>
</body>

</html>

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.