Intercepting Form Submissions

Technical Deep Dive & Specifications

The Form Submission Lifecycle

When a user submits a form (by clicking a <button type="submit">, an <input type="submit">, <input type="image">, or pressing Enter inside an active text input), the browser executes an orchestrated series of steps defined by the WHATWG HTML specification:

[ User Action: Click Submit / Press Enter ]
                   |
                   v
   [ 1. Implicit or Explicit Activation ]
                   |
                   v
   [ 2. Interactive Constraint Validation ]
       ├── If invalid ──> Fire 'invalid' event on fields, display browser bubble, ABORT.
       └── If valid   ──> Continue to step 3.
                   |
                   v
   [ 3. Dispatch 'submit' Event (Bubbles, Cancelable) ]
       ├── If e.preventDefault() IS called ──> Intercepted! JavaScript handles payload via AJAX/Fetch.
       └── If e.preventDefault() NOT called ──> Browser constructs HTTP request & navigates page.

Event Bubbling & Target Resolution

The submit event fires directly on the <form> element, not on the <button>. However, because submit bubbles up the DOM tree, you can attach the listener directly to the form or delegate it to a parent container.

const form = document.querySelector('#checkout-form');

form.addEventListener('submit', (event) => {
  // event is an instance of SubmitEvent
  event.preventDefault(); // Prevents document reload
  console.log('Submission intercepted!');
});

The WHATWG SubmitEvent.submitter Property

Prior to the standardized SubmitEvent specification, determining which button triggered a submission when a form contained multiple submit buttons (e.g., "Save Draft" vs. "Publish") required brittle hacks like capturing individual button click events or maintaining global flag variables.

The modern SubmitEvent interface includes the read-only submitter property. It returns a reference to the specific element that caused the form to be submitted:

+-------------------------------------------------------------------------------+
|                               SubmitEvent                                     |
+-------------------------------------------------------------------------------+
|  - type: 'submit'                                                             |
|  - target: <form id="editor">                                                 |
|  - submitter: <button type="submit" name="action" value="publish">           |
|  - defaultPrevented: true / false                                             |
+-------------------------------------------------------------------------------+

If the form was submitted via pressing Enter in a text input and the form has a default button, event.submitter points to the first submit button in tree order. If no submit button exists, event.submitter is null.

form.submit() vs form.requestSubmit()

A major source of bugs in enterprise applications is the distinction between legacy form.submit() and modern form.requestSubmit():

// ❌ WRONG: Bypasses validation and event listeners
form.submit();

// ✅ CORRECT: Behaves identically to a user clicking a submit button
form.requestSubmit();

// ✅ CORRECT: Simulates clicking a specific secondary button
const draftBtn = document.querySelector('#btn-save-draft');
form.requestSubmit(draftBtn);

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 83 (form id="article-form" novalidate): Adding novalidate suppresses native browser validation tooltips so our custom JavaScript handler controls error messaging.
• Lines 98–103 (button type="submit" name="intent" value="draft"): Both buttons are submit triggers sharing the same name="intent" but distinct value attributes (draft vs publish).
• Line 112 (form.addEventListener('submit', ...)): Listens on the <form> container. Every submit attempt (keyboard or click) routes through here.
• Line 114 (event.preventDefault()): Crucial line preventing the browser from navigating away via a synchronous GET/POST request.
• Line 117 (const submitter = event.submitter): Retrieves the exact DOM <button> element that was clicked to invoke the submission.
• Lines 129–130 (submitButtons.forEach(btn => btn.disabled = true)): Disables all submit controls immediately to enforce idempotency and prevent duplicate API transactions.
• Line 149 (finally { submitButtons.forEach(...) }): Ensures controls are re-enabled regardless of whether the network request succeeded or failed.

Expected Browser Render Output

(Clicking 🚀 Publish Post updates the status log to "Processing...", disables both buttons for 1.2 seconds, and outputs the serialized JSON payload with intent "publish".)

+-------------------------------------------------------------+
| Article Publisher                                           |
|                                                             |
| Article Title                                               |
| [ Mastering Modern DOM                                    ] |
|                                                             |
| Body Content                                                |
| [ Forms in HTML5 are awesome...                           ] |
|                                                             |
| [ 💾 Save Draft ]                    [ 🚀 Publish Post ]    |
|                                                             |
| Status: Idle                                                |
+-------------------------------------------------------------+