AJAX Form Submission with Fetch API

Technical Deep Dive & Specifications

The Asynchronous Form Submission Architecture

A production-grade AJAX form submission follows seven sequential phases:

+-----------------------------------------------------------------------------+
|                     THE 7-PHASE AJAX FORM SUBMISSION PIPELINE               |
+-----------------------------------------------------------------------------+
| Phase 1: Interception     | form.addEventListener('submit', async (e) => {  |
|                           |   e.preventDefault();                           |
+---------------------------+-------------------------------------------------+
| Phase 2: Client Guards    | Run client-side validation (types, sizes).      |
+---------------------------+-------------------------------------------------+
| Phase 3: Lock UI State    | submitBtn.disabled = true; showSpinner();       |
|                           | (Prevents rapid accidental double-clicks)       |
+---------------------------+-------------------------------------------------+
| Phase 4: Construct Data   | const formData = new FormData(form);            |
+---------------------------+-------------------------------------------------+
| Phase 5: Network Dispatch | const res = await fetch(url, {                  |
|                           |   method: 'POST', body: formData, signal        |
|                           | });                                             |
+---------------------------+-------------------------------------------------+
| Phase 6: Handle Response  | if (!res.ok) throw new Error(await res.text()); |
|                           | showSuccessToast(); form.reset();               |
+---------------------------+-------------------------------------------------+
| Phase 7: Unlock UI (Clean)| finally { submitBtn.disabled = false; }        |
|                           | (ALWAYS runs in finally block)                  |
+-----------------------------------------------------------------------------+

Request Cancellation with AbortController

Network connections on mobile devices frequently drop or lag. Users need the ability to cancel an ongoing upload without closing the browser tab:

// 1. Create an AbortController instance
let currentController = null;

function uploadForm(formData) {
  // Cancel any existing in-flight upload
  if (currentController) {
    currentController.abort();
  }

  currentController = new AbortController();
  const { signal } = currentController;

  return fetch('/api/upload', {
    method: 'POST',
    body: formData,
    signal // Attach cancellation signal
  });
}

// 2. Attach to Cancel button
cancelBtn.addEventListener('click', () => {
  if (currentController) {
    currentController.abort();
    currentController = null;
    console.log('Upload aborted by user.');
  }
});

Granular Upload Progress: Fetch vs XMLHttpRequest

Engineering Note: While the modern Fetch API is ideal for responses, the WHATWG Fetch standard currently lacks fine-grained upload progress event hooks for request bodies. When an application requires a real-time 0% to 100% upload progress bar for multi-gigabyte files, engineers use XMLHttpRequest.upload.onprogress or chunked streaming:

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
  if (e.lengthComputable) {
    const percent = Math.round((e.loaded / e.total) * 100);
    progressBar.style.width = `${percent}%`;
  }
});

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 97 (event.preventDefault();): Prevents the browser's default synchronous document navigation.
• Line 100 (setLoadingState(true);): Disables the submit button, displays the loading spinner, and exposes the "Cancel" button.
• Line 104–105 (abortController = new AbortController();): Generates an abort token that can cancel the pending Promise.
• Line 108 (const formData = new FormData(form);): Encapsulates all text and binary attachments into a multipart structure.
• Line 124–128 (catch (error)): Inspects error.name === 'AbortError' to distinguish between intentional user cancellations and unexpected network dropouts.
• Line 129–133 (finally { setLoadingState(false); ... }): Guarantees that submit buttons are re-enabled regardless of network outcome.

Expected Browser Render Output

+-------------------------------------------------------------+
| Project Feedback Submission                                 |
| Submits asynchronously without refreshing the page.         |
|                                                             |
| Project Name: [ Alpha Cloud Launch                        ] |
| Attachment:   [ Choose File ] diagram.png                   |
|                                                             |
| [ 🔄 Uploading... ] [ Cancel Upload ]                       |
|                                                             |
| [ ℹ️ Uploading payload to server... ]                       |
|                                                             |
| (After 2.5s completion:)                                    |
| [ ✅ Success: Feedback recorded (ID: TCK-8812) ]            |
+-------------------------------------------------------------+