Marc Semper Lloret
← El DOM: la web que responde

Sesión 8 · Semana 3

Formularios desde JavaScript

Hoy · Hoja de ruta

  1. 1. Aprende: Cómo se leen los valores de un formulario y qué tipo tienen.
  2. 2. Haz: Lee tu formulario de contacto y conviértelo en un objeto de datos.
  3. 3. Comprueba: Cada valor llega con el tipo correcto antes de usarse.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué campos tiene tu formulario de la UD1?
  2. Un campo numérico, ¿devuelve número?
  3. ¿Cómo sabrías si una casilla está marcada?

Leer un campo

const buscador = document.querySelector("[data-js='buscador']");

buscador.value            // siempre texto
buscador.value.trim()
Number(precioMaximo.value)   // convertir en el borde, como en la UD3

casilla.checked           // true / false
seleccion.value           // el valor de la opción elegida

Todo campo devuelve texto

Incluso los numéricos y los de fecha. Es exactamente el "10" + 5 de la sesión 3 de la UD3, que ahora deja de ser un ejercicio y pasa a ser tu bug.

Convierte al leer, y comprueba: un campo numérico vacío da cadena vacía, y Number("") es 0, no NaN. Ese cero silencioso ha estropeado muchos filtros.

Leer el formulario entero

formulario.addEventListener("submit", (evento) => {
  evento.preventDefault();

  const datos = Object.fromEntries(new FormData(evento.currentTarget));
  console.log(datos);
  // { nombre: "Ana", email: "ana@…", mensaje: "Hola" }
});

FormData recoge los campos que tengan atributo name —de ahí la insistencia de la UD1 en ponerlo— y Object.fromEntries los convierte en un objeto normal, listo para validarlo con las funciones que escribiste en la UD3.

Las casillas no marcadas no aparecen, y los grupos de casillas con el mismo nombre requieren getAll.

Reaccionar mientras se escribe

buscador.addEventListener("input", (evento) => {
  const termino = evento.target.value.trim();
  pintarCatalogo(buscar(catalogo, termino), contenedor);
});

Ya tienes la búsqueda en vivo: buscar es la función de la sesión 15 de la UD3, sin un solo cambio.

Otras cosas útiles

formulario.reset();          // vuelve a los valores iniciales
buscador.focus();            // pone el foco
buscador.select();           // selecciona el contenido
campo.disabled = true;       // deshabilita mientras se envía

Tarea 8 · Leer y usar

  1. Búsqueda en vivo con input sobre tu catálogo pintado.
  2. Un filtro de precio máximo con conversión y comprobación del campo vacío.
  3. Lee el formulario de contacto entero con FormData al enviarlo.
  4. Muestra en consola el objeto resultante y comprueba el tipo de cada valor.
  5. Añade un botón de limpiar que vacíe los filtros y devuelva el foco al buscador.
Objetivo mínimoBúsqueda en vivo y lectura completa del formulario.
Si lo tienesCombina búsqueda y precio máximo en una sola consulta.
RetoDetecta el caso del campo numérico vacío y trátalo como «sin límite».

Checkpoint · fin de la sesión 8

  • Conviertes cada valor al leerlo.
  • Usas FormData y sabes que depende del atributo name.
  • Tratas el campo vacío antes de que se convierta en un cero.
  • Reutilizas las funciones de la UD3 sin modificarlas.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿De qué tipo es el valor de un campo numérico?
  2. ¿Qué campos recoge FormData?
  3. ¿Cuánto vale Number("")?
Ver respuestas

1 · Texto, siempre.

2 · Los que tienen atributo name; las casillas sin marcar no aparecen.

3 · Cero, que es justo lo que hay que detectar antes de usarlo como límite.