FormData: procesar formularios sin recorrer campos

Aprende a implementar un filtro de hábitos con un modal y formularios accesibles en JavaScript. Verás cómo estructurar el HTML, evitar envíos accidentales con type="button", y procesar todos los campos de una sola vez usando FormData y Object.fromEntries. Además, prepara el terreno para un patrón reactivo que actualizará el renderer sin recargar la página.

¿Cómo implementar un filtro con un formulario accesible en JavaScript?

Para integrar el nuevo filter modal, se parte de la misma lógica de los modals existentes (crear y registrar hábitos). La clave es envolver los campos en un form real y añadir un botón de abrir/cerrar el modal, replicando el boilerplate disponible en templates.md.

• Crea un botón para abrir el filter modal.
• Copia el markup base del modal y ajusta textos e identificadores.
• Usa un form con id y campos con name definidos.
• Distingue botones de acción: submit para enviar y type="button" para acciones auxiliares.
• Verifica con un hard reload para limpiar caché del navegador.

Ejemplo de estructura mínima del modal y el formulario:

<button id="filter-modal-button" type="button">Filtrar</button>

<div id="filter-modal" hidden>
  <header>
    <h2>Filtrar hábitos</h2>
    <button id="filter-close" type="button">Cerrar</button>
  </header>

  <form id="filter-form">
    <div class="form-group">
      <label for="frequency">Frecuencia</label>
      <select id="frequency" name="frequency">
        <option value="daily">Diaria</option>
        <option value="weekly">Semanal</option>
      </select>
    </div>

    <div class="form-group">
      <label for="date">Fecha</label>
      <input id="date" name="date" type="date" />
    </div>

    <div class="actions">
      <button type="submit">Filtrar</button>
      <button id="filter-cancel" type="button">Cancelar</button>
    </div>
  </form>
</div>

¿Por qué el type="button" evita envíos accidentales?

• Dentro de un form, un botón sin type se comporta como submit.
• Al hacer clic, puede enviar datos y recargar la página de forma inesperada.
• Solución robusta: marca explícitamente los que no envían como type="button".
• Evita horas de debug por comportamientos implícitos del HTML.

¿Qué atributos necesita cada campo para procesarlo bien?

• Usa name en cada input o select.
• name define la clave del objeto resultante al usar FormData.
• Mantén id para asociar etiquetas y mejorar accesibilidad.
• Nombra de forma clara: por ejemplo, name="date" o name="frequency".

¿Cómo leer todo el formulario con FormData sin recorrer campo por campo?

En lugar de consultar cada elemento individualmente, procesa el formulario completo en el evento submit. Así evitas preguntar “¿cuál es el valor del select?, ¿y del input?” una y otra vez. Con FormData y Object.fromEntries obtienes un objeto plano con todos los pares clave-valor.

const form = document.getElementById('filter-form');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // no recargar la página

  const data = new FormData(event.target); // el form actual
  const values = Object.fromEntries(data.entries());

  console.log(values); // { frequency: 'weekly', date: '2026-02-19' }
});

¿Cómo evitar la recarga con preventDefault?

• El comportamiento por defecto del submit es recargar el documento.
• Usa event.preventDefault() para conservar el estado de la app.
• Luego procesa los datos y decide qué renderizar con tu renderer.

¿Cómo aplicar filter y preparar un flujo reactivo?

Con los valores del formulario ya reunidos, aplica Array.prototype.filter sobre la lista de hábitos y muestra el resultado en consola. Aún no se actualiza la vista; eso llegará con un flujo más reactivo que conecte el estado con el renderer.

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const values = Object.fromEntries(new FormData(event.target).entries());

  // Ejemplo: filtra según los campos presentes en values.
  // Ajusta las condiciones a tus claves reales (p. ej., values.frequency, values.date).
  const filtered = habits.filter((h) => {
    let ok = true;
    if (values.frequency) ok = ok && h.frequency === values.frequency;
    if (values.date) ok = ok && h.date === values.date; // o la comparación que uses
    return ok;
  });

  console.log(filtered); // inspecciona el resultado antes del render reactivo
});

Reto inmediato:

• Usa el objeto de valores para construir un filtro dinámico.
• Prueba combinaciones de frecuencia y fecha.
• Muestra en console.log lo que coincida.
• Prepara el estado para conectarlo con un patrón reactivo en el siguiente paso.

¿Qué filtros agregarías a tu filter modal y cómo estructurarías el estado para el renderer? Comparte tus ideas y dudas en los comentarios.