0

Hola estimados buenas noches, estoy iniciando en desarrollo web, a raíz de estudiar REACT la parte de hooks, me puse a hacer pruebas para comparar ciertas funcionalidades sin React y me crucé con armar un simple formulario con javascript y html (la comparación que quise hacer es guardar supuestos estados en variables ingresadas por la UI). En principio he leído la documentación de Mozilla y otros sitios y en conclusión me he confundido más por los errores que me arroja el navegador en la parte de consola.

Para aclarar la introducción es un contexto de donde vengo y que mi pregunta no es de React, en gran parte necesito solucionar este funcionamiento de formularios para pasar a React.

Acá comparto el código resumido de lo que me falla, es una versión de tantas que he probado y ninguna ha funcionado:

<!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> Formulario de productos </title>
</head>
<body>
    <h2>product code</h2>
    <form action="" method="post" name="sub">
        <h2>Ingrese código</h2>
        <input type="text" name="codeProd" id="codeProd">
        <h2>Ingrese producto</h2>
        <input type="text" name="prod" id="prod">
        <input type="submit" name="sub" value="save" >
    </form>
    <script type="text/javascript">
    //variables
    let codeProduct = null;
    let product = null;
    console.log("codeProduct");
    console.log("product");

        //submit
        function sub(){
            codeProduct = document.getElementById("codeProd").value;
            product = document.getElementById("prod").value;
            return(codeProduct, product);
            console.log("codeProduct");
            console.log("product");
        };
    sub();
    console.log("codeProduct");
    console.log("product");
    </script>
</body>
</html>

ANTES DEL ERROR

introducir la descripción de la imagen aquí

DESPUÉS DE INGRESAR DATOS introducir la descripción de la imagen aquí

Si hay alguna sugerencia o corrección será bienvenida. Saludos y gracias

1 respuesta 1

1

La "forma correcta" no existe en programación. Existen las formaS (plural) incorrectas, las formaS correctas y muchas que están entre medio.

Luego, sobre el guardar los inputs en variables: En rigor, todo elemento con una Id ya está como variable, y por ende su value también lo está, ejemplo:

console.log(MiInput.value);
<input type="text" value="HOLA" id="MiInput" />

Si te fijas no es necesario ocupar getElementById ni nada similar, ya está guardado.

Por cierto, esto es considerado una mala práctica ya que para que funcione correctamente no debes repetir los ID ni siquiera con las variables de javascript. Y cuando lo has hecho, es extremadamente difícil detectar la razón. Por lo tanto un mejor código sería:

console.log(document.getElementById("MiInput").value)
<input type="text" value="HOLA" id="MiInput" />

Puedes ocupar getElementById, querySelector o cualquier otro tipo de selector, que son varios.

Hasta ahora hemos rescatado el valor de un input sin usar un form, porque no es necesario. El form es un elemento que ha sido creado para subir un formulario al servidor.

Peeeero. Con la llegada de aplicaciones web hace años que esto dejó de ser 100% cierto, y los forms ahora también sirven para procesar formularios del cliente.

En generar uno quiere rescatar del form un par "name /value", es decir el nombre y valor de cada input; para esto es posible usar la clase FormData, ejemplo:

const form = document.getElementById('formulario');
form.addEventListener('submit', procesarForm)

function procesarForm(e){
  event.preventDefault(); //detenemos el envío del form al servidor
  const formData = new FormData(event.target);
  const diccionario = {};
  formData.forEach((value, key) => diccionario[key] = value);
  console.log(diccionario);
}
<form id="formulario">
  <input name="apellido" value="Gomez">
  <input type="number" name="Edad" value="22">
  <select name="genero">
    <option value="Hombre">Hombre</option>
    <option value="Mujer">Mujer</option>
  </select>
  <button type="submit">Procesar</button>
</form>

Este es un ejemplo mínimo, pero funciona para la mayoría de los casos habituales, es decir puedes agregar más inputs y selects y no hay que cambiar nada en el Javascript. No obstante, seguramente fallará con checkbox, pero es para que te hagas una idea.

1
  • Gracias por la molestia de armar un código que funcione, me quedó un poco más claro, me imaginaba algo mas sencillo y veo que hay otros caminos que ignoraba, hay mucho mas por estudiar de parte mía como por ejemplo el funcionamiento que implementaste con FormData y el de frenar los eventos para capturar esos valores de los inputs, asi que es interesante lo de FormData, creía que sólo se podía rescatar los datos con el Form configurando de algún modo los atributos, y Form es sólo para servidores como bien me mencionas. Gracias! el 24 ene. 2023 a las 15:59

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.