Formularios — JS: API del DOM

En las aplicaciones frontend modernas, hay dos enfoques para trabajar con formularios. En algunos casos, los datos se actualizan en la página a medida que se modifican en el formulario. Estos formularios no tienen botones "Guardar" o "Enviar". Cada elemento del formulario está vinculado a un controlador que detecta cualquier cambio. Un ejemplo típico es la filtración de datos en una página.

En un enfoque más clásico, el formulario se envía al hacer clic en un botón. En este caso, se debe utilizar el evento submit del formulario:

const form = document.querySelector(/* selector del formulario */);
form.addEventListener('submit', (e) => {
   // Si queremos trabajar con el formulario a través de JavaScript,
   // debemos detener la acción predeterminada, que es el envío del formulario
  e.preventDefault();
  // Hacer algo
});

¿Por qué no usar el evento click en el botón de envío del formulario? Técnicamente, se puede hacer, pero se romperá el comportamiento estándar. Los navegadores permiten enviar formularios presionando la tecla Enter en el teclado. En ese caso, el botón no se presiona, pero el formulario se envía.

El procesamiento del formulario generalmente se realiza de la siguiente manera:

• Se extraen los datos del formulario
• Se realiza una solicitud al servidor o se actualizan los datos en la aplicación
• Se actualiza la apariencia visual

Los pasos dos y tres los veremos en las próximas lecciones cuando hablemos de AJAX. Aquí nos centraremos en el primero: la extracción de datos del formulario.

Hay dos enfoques. Primero, veamos el enfoque incorrecto:

const input = document.querySelector(/* selector del campo de entrada */);
const form = document.querySelector(/* selector del formulario */);
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const { value } = input;
  // Hacer algo con los datos
});

Con este enfoque, tendrás que trabajar con cada elemento del formulario individualmente: primero extraerlos del DOM y luego recopilar los valores. No es necesario hacer esto porque hay una forma correcta.

La forma correcta es utilizar el objeto FormData específico que está disponible en los navegadores. Este objeto permite obtener los valores de todos los campos de un formulario para los cuales se ha definido el atributo name:

<form method="post">
  <input name="email" value="example@example.com">
  <input name="password" value="supersecret">
  <input type="submit" value="Sign Up">
</form>

const form = document.querySelector(/* selector del formulario necesario */);
form.addEventListener('submit', (e) => {
  e.preventDefault();
  // Los datos del formulario se extraen automáticamente del DOM
  // Se pasa el elemento del formulario tomado del evento
  const formData = new FormData(e.target);
  // Ahora puedes trabajar con ellos
  formData.get('email'); // example@example.com
  // values() devuelve un iterador, así que lo convertimos en un array
  [...formData.values()]; // ['example@example.com', 'supersecret']
  // También es un iterador
  [...formData.entries()];
  // [['email', 'example@example.com'], ['password', 'supersecret']]

  // Convertirlo en un objeto normal
  Object.fromEntries(formData);
  // { email: 'example@example.com', password: 'supersecret' }
});

Extracción de elementos del formulario

A veces, aún es necesario acceder a los elementos del formulario directamente. Por ejemplo, al implementar la validación mientras se modifica el formulario, en lugar de al enviarlo.

En estos casos, se trabaja directamente con los elementos del formulario:

const input = document.querySelector(/* selector del campo de entrada */);
input.addEventListener('change', (e) => {
  // Lógica
});

Si hay muchos elementos, el código que accede al DOM se volverá engorroso. Esto se puede evitar utilizando las capacidades del DOM relacionadas con los formularios. Cada formulario tiene una propiedad elements que devuelve un objeto con todos los elementos del formulario. Las claves del objeto son los nombres de los elementos y los valores son los propios elementos:

<form method="post">
  <input name="email" value="example@example.com">
  <input name="password" value="supersecret">
  <input type="submit" value="Sign Up">
</form>

const form = document.querySelector(/* selector del formulario */);
form.elements.email // <input name="email" ...
form.elements.password // <input name="password" ...

// Procesamiento
form.elements.email.addEventListener('change', () => {
  // Procesamiento
});