Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Read FormSubmission.{method,location} from submitter
When a [`SubmitEvent` is fired][mdn-submit-event], it encodes the element responsible for the submission. This element can be an `<input type="submit">`, a `<button type="submit">` element, or the `<form>` element itself (in the case of submissions initiated by `HTMLFormElement.requestSubmit()` that omit the `submitter` argument). According to the [MDN documentation for the `event.submitter` property][mdn-submitter]: > An element, indicating the element that sent the submit event to the > form. While this is often an `<input>` element whose type or a > `<button>` whose type is `submit`, it could be some other element which > has initiated a submission process. > If the submission was not triggered by a button of some kind, the > value of `submitter` is `null`. To support submissions from elements other than the `<form>` that can declare their own [`formmethod`][mdn-formmethod] and [`formaction`][mdn-formaction], extend the `FormSubmission` object to encode a reference to the submitter, and add an `HTMLElement` argument to the `FormSubmitObserver` and `FormSubmissionDelegate` methods. Invokes [HTMLFormElement.method][mdn-method] instead of `getAttribute("method")` to defer gracefully handling missing value fallbacks to the [HTMLFormElement.method][mdn-method] implementation. [mdn-request-submit]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit#Parameters [mdn-submit-event]: https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent [mdn-submitter]: https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter [mdn-formmethod]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formmethod [mdn-formaction]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction [mdn-method]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/method Include Submitter in FormData === While constructing the `FormData` during a submission, attempt to read the submitting `<button>` element's [`[name]`][button-name] and [`[value]`][button-value] attributes, and encode them as part of the submission. While an [`<input type="submit">` element][input-submit] can have a `[name]` and `[value]` attribute, the `value` is rendered as the "button"'s text content. [form-data]: https://developer.mozilla.org/en-US/docs/Web/API/FormData [button-name]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name [button-value]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-value [input-submit]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit Form Submitter polyfill === Extend the `FormSubmitObserver` event listening to track `<button type="submit">` and `<input type="submit">` clicks [in Browsers that have spotty support][support]. The implementation is largely ported from both [basecamp/turbolinks#4][] and [rails/rails#33413][]. The `FormSubmitter` type definition is deliberately scoped to the `FormSubmitObserver` module, since the [Browser-native `SubmitEvent.submitter` is only as specific as `HTMLElement`][SubmitEvent], so it's least disruptive to scope limitations to the polyfilling logic. [support]: https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter#Browser_compatibility [basecamp/turbolinks#4]: https://github.com/basecamp/turbolinks/pull/4 [rails/rails#33413]: rails/rails#33413 [SubmitEvent]: https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent#Properties
- Loading branch information
1 parent
b21dfb4
commit bf257f3
Showing
11 changed files
with
86 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,2 @@ | ||
import "./custom-elements-native-shim" | ||
import "./submit-event" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
type FormSubmitter = HTMLElement & { form?: HTMLFormElement } | ||
|
||
const submittersByForm: WeakMap<HTMLFormElement, HTMLElement> = new WeakMap | ||
|
||
function findSubmitterFromClickTarget(target: EventTarget | null): FormSubmitter | null { | ||
const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null | ||
const candidate = element ? element.closest("input, button") as FormSubmitter | null : null | ||
return candidate?.getAttribute("type") == "submit" ? candidate : null | ||
} | ||
|
||
function clickCaptured(event: Event) { | ||
const submitter = findSubmitterFromClickTarget(event.target) | ||
|
||
if (submitter && submitter.form) { | ||
submittersByForm.set(submitter.form, submitter) | ||
} | ||
} | ||
|
||
(function() { | ||
if ("SubmitEvent" in window) return | ||
|
||
addEventListener("click", clickCaptured, true) | ||
|
||
Object.defineProperty(Event.prototype, "submitter", { | ||
get(): HTMLElement | undefined { | ||
if (this.type == "submit" && this.target instanceof HTMLFormElement) { | ||
return submittersByForm.get(this.target) | ||
} | ||
} | ||
}) | ||
})() |