form.submit() vs requestSubmit(): Events and Validation

form.submit() vs form.requestSubmit() at a glance

const form = document.querySelector("#contact");
const saveBtn = form.querySelector('button[name="intent"][value="save"]');

form.submit();               // no event, no validation, no button value
form.requestSubmit();        // validation + submit event, submitter = null
form.requestSubmit(saveBtn); // same, and sends intent=save

The button passed to requestSubmit() must be a submit button that belongs to that form; anything else throws. If the form has novalidate (or the button has formnovalidate), requestSubmit() skips validation too, exactly like a click would.

The submit event and preventDefault()

The reliable way to send a form with JavaScript is not to call either method from a click handler. Put your code on the form's submit event, cancel the native navigation with event.preventDefault(), and send the data with fetch:

form.addEventListener("submit", async (e) => {
  e.preventDefault();               // no page reload
  const data = new FormData(form);  // every named, enabled field
  await fetch(form.action, { method: "POST", body: data });
});

The browser only fires submit after validation passes, so required and pattern checks still protect you. The same handler covers mouse clicks, the Enter key and requestSubmit(). How to read and shape the payload is covered in FormData in JavaScript.

Common bugs: why the submit event or validation does not fire

1. A control named submit. <button name="submit"> or id="submit" shadows the method, so form.submit() throws "form.submit is not a function". Rename it, or call HTMLFormElement.prototype.submit.call(form).
2. Calling submit() inside the submit handler. A common pattern is e.preventDefault(), an async check, then form.submit(). It works (no loop, because submit() fires no event), but the clicked button's name/value is lost. Switching that line to requestSubmit() fires the handler again and loops forever, so guard it with a flag or send with fetch instead.
3. Buttons without type="button". A <button> inside a form defaults to type="submit". "Show password", "Add row" or modal buttons then submit the form by accident. Give every non-submit button type="button".
4. Enter-key implicit submission. Pressing Enter in a text input clicks the form's first submit button, so e.submitter is that button. With no submit button, Enter only submits when the form has a single text-like field. To block it, handle the submit event, not keydown on each field.
5. Validation silently skipped. form.submit() and a click handler that calls fetch both bypass required and pattern. Use requestSubmit() or call form.reportValidity() first.

For the full checklist (missing name attributes, buttons outside the form, wrong method) see why your HTML form is not submitting. If users double-click, add the guards from preventing duplicate form submissions.

e.submitter and formaction

Every submit event is a SubmitEvent with a submitter property: the button that started it, or null. A native submission uses that button's formaction, formmethod and formnovalidate overrides. Once you call preventDefault() and use fetch, you have to apply them yourself:

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const btn = e.submitter;
  const action = btn?.getAttribute("formaction") || form.action;
  const data = new FormData(form, btn);  // includes the button's name/value
  await fetch(action, { method: "POST", body: data });
});

Read the attribute rather than btn.formAction: the property returns the page URL when the attribute is missing. A button placed outside the form with the form attribute is still the submitter, and requestSubmit() accepts it as an argument.

Working example: requestSubmit() plus fetch to splitforms

<form id="contact" action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input name="name" required>
  <input name="email" type="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
  <p id="status" role="status"></p>
</form>

<script>
const form = document.getElementById("contact");
const status = document.getElementById("status");

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  status.textContent = "Sending...";
  const res = await fetch(form.action, {
    method: "POST",
    headers: { Accept: "application/json" },
    body: new FormData(form, e.submitter),
  });
  const result = await res.json();
  if (res.ok && result.success === true) {
    form.reset();
    status.textContent = "Thanks! Your message was sent.";
  } else {
    status.textContent = result.message || "Could not send. Please try again.";
  }
});

// Submitting from elsewhere (a keyboard shortcut, a wizard step)?
// form.requestSubmit() runs validation and the handler above.
</script>

Without JavaScript the same markup still posts to the endpoint as a normal form. Status codes and error bodies are listed in the response guide. Get a free access key.

FAQ

Browser references: MDN: requestSubmit() and MDN: SubmitEvent.submitter.