FormData en JavaScript

En el desarrollo web moderno, manejar los datos de formulario de manera eficiente es crucial para crear experiencias de usuario dinámicas e interactivas. JavaScript proporciona una herramienta poderosa para gestionar datos de formulario a través de la API FormData. En esta guía, profundizaremos en FormData, explorando sus capacidades, sintaxis y mejores prácticas para su implementación.

Entender FormData

FormData es un objeto de JavaScript integrado que te permite capturar datos de formulario y construirlos en un formato de par clave-valor. Simplifica el proceso de recopilar información de formularios HTML y enviarla al servidor de forma asíncrona utilizando la API fetch.

Crear objetos FormData

Para crear un objeto FormData, simplemente instáncialo usando el constructor FormData(). También puedes ver todo el contenido dentro de una instancia de FormData llamando al método entries. Este método devuelve un objeto Iterator, donde cada miembro contiene una clave y un valor:

---

<script>
  function onSubmit(event) {
    event.preventDefault();
    const form = document.getElementById('myForm');
    const formData = new FormData(form);
    let results = '';
    for (const [key, value] of formData.entries()) {
      results += `${key}: ${value}\n`;
    }
    alert(results)
  }
</script>
<form id="myForm" onsubmit="onSubmit(event)">
  <input type="text" name="username" value="John Doe" />
  <input type="email" name="email" value="[email protected]" />
  <input type="submit" />
</form>

Try it Yourself »

Acceder a los datos del formulario

Puedes acceder a campos individuales del formulario usando el método get() o iterar sobre todos los campos del formulario usando entries(), como viste en el ejemplo anterior.

---

<form id="myForm" onsubmit="onSubmit(event)">
  <input type="text" name="username" value="John Doe" />
  <input type="email" name="email" value="[email protected]" />
  <input type="submit" />
</form>
<script>
  function onSubmit(event) {
    const form = document.getElementById('myForm');
    const formData = new FormData(form);
    const username = formData.get('username');
    const email = formData.get('email');
    alert(`username: ${username}; email: ${email}`);
  }
</script>

Try it Yourself »

Enviar FormData con la API Fetch

Uno de los casos de uso más comunes para FormData es enviar datos de formulario al servidor de forma asíncrona. Podemos lograr esto fácilmente utilizando la API Fetch:

---

<form id="myForm" onsubmit="onSubmit(event)">
  <input type="text" name="title" value="A title" />
  <input type="text" name="body" value="A body" />
  <input type="submit" value="Submit Post" />
</form>
<div>post id: <span id="response"></span></div>
<script>
  function onSubmit(event) {
    event.preventDefault();
    const form = document.getElementById('myForm');
    const formData = new FormData(form);
    const responseSpan = document.getElementById('response');
    fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: formData
    })
      .then(response => response.json())
      .then(data => { responseSpan.innerHTML = data.id; })
      .catch(error => console.error('Error:', error));
  }
</script>

Try it Yourself »

advertencia

Cuando pasas tu formulario al constructor FormData, este incluye automáticamente todos los campos del formulario HTML, incluidos los campos ocultos. Esto puede provocar un comportamiento inesperado si no tienes cuidado, especialmente si hay campos sensibles o innecesarios en el formulario.

Manejo de cargas de archivos

FormData destaca en el manejo de cargas de archivos, lo que lo convierte en una herramienta esencial para los desarrolladores web que trabajan con campos de entrada de archivos en formularios. Veamos cómo podemos manejar cargas de archivos utilizando FormData:

---

<form id="fileUploadForm">
    <input type="file" name="file" />
    <input type="submit" value="Upload" />
</form>
<script>
    const form = document.getElementById('fileUploadForm');
    form.addEventListener('submit', (event) => {
        event.preventDefault();
        const formData = new FormData(form);
        const fileInput = document.querySelector('input[type="file"]');
        const file = fileInput.files[0];
        if (file) formData.append('file', file);
        fetch('https://httpbin.org/post', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => console.log('Upload successful:', data))
        .catch(error => console.error('Error:', error));
    });
</script>

## Conclusión

FormData es una herramienta versátil y poderosa para gestionar datos de formulario en aplicaciones JavaScript. Ya sea que estés manejando entradas de texto simples o cargas de archivos complejas, FormData simplifica el proceso y proporciona una interfaz conveniente para interactuar con los datos del formulario. Al dominar FormData, puedes mejorar la interactividad y la capacidad de respuesta de tus aplicaciones web, ofreciendo una experiencia de usuario fluida.

## Práctica


<W3PubMaxBottomAd />

<W3Practice practiceB64="ewogICAgInF1ZXN0aW9uIjogIsK/Q3XDoWwgZXMgdW4gYmVuZWZpY2lvIGRlIHVzYXIgZWwgb2JqZXRvIEZvcm1EYXRhIGVuIEphdmFTY3JpcHQ/IiwKICAgICJvcHRpb25zIjogWwogICAgICAgIHsKICAgICAgICAgICAgInN0YXRlbWVudCI6ICJTaW1wbGlmaWNhIGVsIHByb2Nlc28gZGUgY2FwdHVyYXIgZGF0b3MgZGUgZm9ybXVsYXJpbyBkZXNkZSBmb3JtdWxhcmlvcyBIVE1MLiIsCiAgICAgICAgICAgICJjb3JyZWN0IjogdHJ1ZQogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgICAic3RhdGVtZW50IjogIlBlcm1pdGUgdW4gbWFuZWpvIGbDoWNpbCBkZSBjYXJnYXMgZGUgYXJjaGl2b3MgZW4gZm9ybXVsYXJpb3MuIiwKICAgICAgICAgICAgImNvcnJlY3QiOiB0cnVlCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICAgICJzdGF0ZW1lbnQiOiAiQ2lmcmEgYXV0b23DoXRpY2FtZW50ZSBsb3MgZGF0b3MgZGVsIGZvcm11bGFyaW8gcGFyYSB1bmEgdHJhbnNtaXNpw7NuIHNlZ3VyYS4iLAogICAgICAgICAgICAiY29ycmVjdCI6IGZhbHNlCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICAgICJzdGF0ZW1lbnQiOiAiQ29udmllcnRlIGxvcyBkYXRvcyBkZWwgZm9ybXVsYXJpbyBlbiBmb3JtYXRvIEpTT04uIiwKICAgICAgICAgICAgImNvcnJlY3QiOiBmYWxzZQogICAgICAgIH0KICAgIF0KfQ==" />