TIL - submit() versus requestSubmit()

[giscus[bot]]

TIL - submit() versus requestSubmit()

How the requestSubmit() function differs from submit()

https://www.raymondcamden.com/2024/03/01/til-submit-versus-requestsubmit

[depsimon]

Safari doesn't support requestSubmit at the moment.

My workaround is to dispatch a SubmitEvent instead.

export type Submitter = HTMLInputElement | HTMLButtonElement;

/**
 * Trigger a form submit event with an optional submitter.
 * If the submitter is not mounted, it will be appended to the form and removed after submission.
 */
export function requestSubmit(
  form: HTMLFormElement | null | undefined,
  submitter: Submitter | null = null,
): void {
  if (!form) {
    throw Error(
      "Failed to submit the form. The element provided is null or undefined.",
    );
  }

  if (typeof form.requestSubmit === "function") {
    form.requestSubmit(submitter);
  } else {
    const event = new SubmitEvent("submit", {
      bubbles: true,
      cancelable: true,
      submitter,
    });

    form.dispatchEvent(event);
  }
}

[cfjedimaster]

Wow, I could have sworn I saw it supported on MDN! I just checked, it's showing it as supported. Is MDN wrong about this?

[cfjedimaster]

CanIUse shows it as well: https://caniuse.com/?search=requestSubmit

[depsimon]

Ah you're right, it seems I haven't checked in a while.

We still have occurences of users for which it's not supported (primarily on Safari & Safari iOS) but it's probably becoming safer to use nowadays :)

[bennadel]

For what it's worth, I recently learned about requestSubmit() while looking into Hotwire Turbo. One of the patterns they use is to request the submission of a form with secondary buttons that override the formAction. That said, it also seems to break on Safari on iOS. That is, when I call .requestSubmit( secondaryButton ), Safari on iOS seems to treat it like I'm submitting the "default form" action, not the secondary button. As such, the formAction` doesn't get overridden.

All to say, I wonder if Safari's support is only partial ?