The formdata event: edit submissions before they leave

A modern API you probably haven't used

The browser fires a formdata event after the user clicks submit but before the request is sent. The handler gets a live FormData it can edit:

form.addEventListener("formdata", (e) => {
  e.formData.append("client_ts", Date.now());
  e.formData.delete("internal_only_field");
});

That payload is what actually hits your server. No hidden inputs, no JS submit-wrap, no breaking accessibility.

What it's good for

• Add client-derived metadata — timestamps, timezone offset, screen size, A/B variant — without polluting the visible form.
• Strip helper fields — a "confirm password" field is for UX; the server shouldn't get it.
• Normalize values — trim whitespace, lowercase emails, format phone numbers — without rewriting the user's input visually.

Why this beats hidden inputs

A hidden input is in the DOM, so:

• Form-fill extensions can read or alter it.
• The user-agent's autofill may overwrite it.
• If you set its value via JS later, you have to remember to update it on every change.

formdata runs once at submit time, with the freshest values. The form HTML stays clean.

Browser support

Chrome 78+, Firefox 72+, Safari 14.5+. If you support anything older, you fall back to listening for submit with e.preventDefault(), building your own FormData, and fetch()-ing it manually — much messier.