DEV Community

Cover image for Simplifying Web Forms with the FormData Web API
Mariana Caldas for Web Dev Path

Posted on

3 2

Simplifying Web Forms with the FormData Web API

Oh, the beauty of filling out online forms... Whether ordering a book, signing up for a newsletter, or posting on social media, forms are the digital bridges connecting us to various online services. Behind every form submission, a complex process ensures your information lands exactly where it needs to be. This process has become less tricky to implement since 2012 with the FormData API. This game-changer Web API has been continuously updated to meet modern web development needs. Today, it boasts broad compatibility across all major browsers, including Chrome, Firefox, Safari, and Edge, making it a reliable tool in the web developer's toolkit.

Simply put, FormData offers an efficient and straightforward way to handle user input and file uploads.


How FormData Simplifies Data Handling

Imagine packing for a trip with various items: clothes, shoes, and a toothbrush. Carrying each item separately would be cumbersome, but packing them all into a suitcase makes the process manageable. FormData operates similarly to that suitcase, efficiently packaging inputs into a single managed entity.

A Unified Example

Consider a form where users can enter their name, upload a profile picture, and, if necessary, add multiple phone numbers:

//html
<form id="myForm">
  <input type="text" name="username" placeholder="Username">
  <input type="file" name="profilePic" placeholder="Upload your profile picture">
  <!-- Users can add phone number fields dynamically -->
  <button type="submit">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

To collect all form data with FormData:

//js
const form = document.querySelector('#myForm');
const formData = new FormData(form);
Enter fullscreen mode Exit fullscreen mode

Check out the following to understand how to use FormData with vanilla JavaScript.


Sending FormData

FormData simplifies data collection and transmission, especially when used with the Fetch API for seamless server communication.

Enhanced Communication with Fetch API

When paired with fetch, FormData simplifies the process of sending data to a server since we don't have to worry about setting the right headers or formatting the data correctly (Stack Overflow discussion).

Example with FormData:

const form = document.querySelector('#myForm');
const formData = new FormData(form);

fetch('https://example.com/profile', {
  method: 'POST',
  body: formData,
}).then(response => {
  if (response.ok) {
    console.log("Profile updated successfully!");
  }
}).catch(error => console.error('Error:', error));
Enter fullscreen mode Exit fullscreen mode

Example without FormData:

This method required a thorough understanding of HTTP requests and meticulous attention to detail, making form submissions more complex.

const form = document.querySelector('#myForm');

form.addEventListener('submit', function (e) {
  e.preventDefault();

  const username = document.querySelector('input[name="username"]').value;
  const profilePic = document.querySelector('input[name="profilePic"]').files[0];
  const formData = `username=${encodeURIComponent(username)}&profilePic=${encodeURIComponent(profilePic.name)}`;

  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://example.com/profile');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log("Profile updated successfully!");
    } else {
      console.error('Error:', xhr.responseText);
    }
  };

  xhr.send(formData);
});
Enter fullscreen mode Exit fullscreen mode

In the last example above, you can see several steps that FormData automates for us:

  • Manually collects each input's value from the form.
  • It formats the data into a query string, encoding each value to ensure it's safe to send over the Internet.
  • Explicitly sets the Content-Type header to application/x-www-form-urlencoded for the server to interpret incoming data correctly.
  • It simplifies file uploads.

FormData with React

React's introduction revolutionized building interactive UIs, although form handling can still be daunting. Integrating FormData within React simplifies this aspect significantly.

Here is a React snippet that incorporates FormData for handling note submissions in an interactive UI:

import React, { useState, useEffect, useRef } from "react";

// FieldNotes component to handle and display notes
function FieldNotes() {
  // State to store array of notes
  const [notes, setNotes] = useState([]);

  // Handles form submission
  const handleSubmit = (e) => {
    e.preventDefault(); // Prevents the default form submit action
    const formData = new FormData(e.target); // Initializes FormData with form element
    const newNote = formData.get("note"); // Retrieves 'note' value from form data

    // Adds new note to the list if it is not just whitespace
    if (newNote.trim()) {
      setNotes(prevNotes => [...prevNotes, newNote]); // Updates the notes state
      e.target.reset(); // Resets the form inputs after submission
    }
  };

  // Ref to track the last note in the list for scrolling purpose
  const lastNoteRef = useRef(null);

  // Effect to scroll to the last note when notes array updates
  useEffect(() => {
    if (lastNoteRef.current) {
      lastNoteRef.current.scrollIntoView({ behavior: "smooth" });
    }
  }, [notes]);

  // Renders the component UI
  return (
    <article>
      <h1>Field Notes</h1>
      <form onSubmit={handleSubmit}>
        <input
          required
          type="text"
          name="note"
          placeholder="Type your note here..."
        />
        <button type="submit">Add Note</button>
      </form>
      <ul>
        {notes.map((note, index) => (
          <li key={index} ref={index === notes.length - 1 ? lastNoteRef : null}>{note}</li>
        ))}
      </ul>
    </article>
  );
}

export default FieldNotes;

Enter fullscreen mode Exit fullscreen mode

Wrapping Up

The FormData API, with its straightforward and efficient approach to handling form data, truly simplifies web development. Whether you're working with plain JavaScript or integrating it into a React application, FormData optimizes collecting, managing, and submitting form data. It's like having a personal assistant who handles all the tedious details for you, letting you focus on creating engaging and dynamic user experiences.

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay