Document the FormData constructor submitter parameter #23950

jenseng · 2023-01-28T06:59:24Z

Description

Document the FormData constructor submitter parameter.

Also add a "Submit button" glossary page and link to it from various places to help facilitate a consistent and complete understanding of what a submit button is :)

Motivation

This is a new feature which is landing in major browsers soon, so it would be useful to have it documented.

Additional details

Spec: https://xhr.spec.whatwg.org/#interface-formdata
Spec PR (merged): whatwg/xhr#366
Chromium implementation (landing in Chrome 112): https://chromium-review.googlesource.com/c/chromium/src/+/4189297
WebKit implementation (landing in Safari 16.4): WebKit/WebKit#9188
Gecko implementation (landing in Firefox 111): https://phabricator.services.mozilla.com/D167576

Related issues and pull requests

Fixes #23917

jenseng · 2023-01-28T07:02:57Z

Here's what the example looks like in bleeding edge WebKit w/ submitter support:

github-actions · 2023-01-30T11:15:50Z

Preview URLs (7 pages)

Flaws (1)

Note! 6 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/FormData/FormData
Title: FormData()
Flaw count: 1

broken_links:
- Anchor not lowercase

External URLs (1)

URL: /en-US/docs/Mozilla/Firefox/Releases/111
Title: Firefox 111 for developers

https://bugzil.la/1812696 (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2023-03-13 15:01:57)

jenseng · 2023-01-30T16:35:48Z

cc @annevk

jpmedley · 2023-01-30T16:41:41Z

files/en-us/web/api/formdata/formdata/index.md

-  - : An HTML {{HTMLElement("form")}} element — when specified, the {{domxref("FormData")}} object will be populated with the form's current keys/values using the name property of each element for the keys and their submitted value for the values. It will also encode file input content.
+  - : An HTML {{HTMLElement("form")}} element — when specified, the {{domxref("FormData")}} object will be populated with the `form`'s current keys/values using the name property of each element for the keys and their submitted value for the values. It will also encode file input content.
+- `submitter` {{optional_inline}}
+  - : A {{Glossary("submit button")}} that is a member of the `form`. If the `submitter` has a `name` attribute or is an `{{HtmlElement('input/image', '&lt;input type="image"&gt;')}}`, it will be included in the form data set.


Suggested change

- : A {{Glossary("submit button")}} that is a member of the `form`. If the `submitter` has a `name` attribute or is an `{{HtmlElement('input/image', '<input type="image">')}}`, it will be included in the form data set.

- : A {{Glossary("submit button")}} that is a member of the `form`. If the `submitter` has a `name` attribute or is an `{{HtmlElement('input/image', '<input type="image">')}}`, the value of the name attribute will be included in the form data set.

This might be misleading, as that could be understood to mean the value attribute. While the name + value are included for a <button> or <input type="submit">, that's not the case for an <input type="image"> (i.e. value is unused and instead you get two entries for the x/y coordinate).

Maybe we could say something like ..., its value(s) will be included ..., wdyt?

Or we could split it into two sentences, like on the Submit button page. Or perhaps keep the original wording but have will be included link directly to the relevant Form data entries heading on the Submit button page.

I changed the wording slightly.

Hmm, that's still not quite accurate, as name-less image inputs will add entries to the form data set. e.g. clicking <input type="image" /> will yield something like x=123&y=234

How about this wording tweak, which also adds an example for the common case?

A {{Glossary("submit button")}} that is a member of the `form`. If the `submitter` has a `name` attribute or is an `{{HtmlElement('input/image', '<input type="image">')}}`, its data [will be included](...) in the form data set (e.g. `buttonName=buttonValue`).

will be included would link directly to the relevant explainer on the Submit button page.

github-actions · 2023-02-24T12:07:03Z

This pull request has merge conflicts that must be resolved before it can be merged.

github-actions · 2023-03-03T11:54:08Z

This pull request has merge conflicts that must be resolved before it can be merged.

jenseng · 2023-03-09T20:43:31Z

Rebased and made some wording tweaks, also added some more links. LMK what you think @jpmedley, thanks!

jenseng · 2023-03-09T21:23:57Z

Added a entry for the firefox 111 release when this is landing

github-actions · 2023-03-12T06:57:54Z

This pull request has merge conflicts that must be resolved before it can be merged.

Also add a "Submit button" glossary page and link to it from various places to help facilitate a consistent and correct understanding of what a submit button is :) Spec PR (merged): whatwg/xhr#366 Spec: https://xhr.spec.whatwg.org/#interface-formdata

files/en-us/glossary/submit_button/index.md

Elchi3

Thank you! Great work 👍

inactive

jenseng requested review from a team as code owners January 28, 2023 06:59

jenseng requested review from jpmedley, schalkneethling and Elchi3 and removed request for a team January 28, 2023 06:59

github-actions bot added Content:Glossary Glossary entries Content:HTML Hypertext Markup Language docs Content:Learn Learning area docs Content:WebAPI Web API docs labels Jan 28, 2023

jenseng force-pushed the form-data-submitter branch from 2d730c6 to de47be4 Compare January 28, 2023 07:01

jenseng force-pushed the form-data-submitter branch from de47be4 to e88099d Compare January 30, 2023 16:12

jpmedley previously requested changes Jan 30, 2023

View reviewed changes

github-actions bot added the rebase needed 🚧 label Feb 24, 2023

github-actions bot added the merge conflicts 🚧 [PR only] label Mar 3, 2023

bsmth removed the rebase needed 🚧 label Mar 3, 2023

jenseng force-pushed the form-data-submitter branch from e88099d to b763944 Compare March 9, 2023 20:41

github-actions bot removed the merge conflicts 🚧 [PR only] label Mar 9, 2023

github-actions bot added the Content:Other Any docs not covered by another "Content:" label label Mar 9, 2023

jenseng mentioned this pull request Mar 10, 2023

Issue with "FormData()": type=submit inputs not included #14305

Closed

jenseng requested review from jpmedley and removed request for schalkneethling and Elchi3 March 10, 2023 22:54

github-actions bot added the merge conflicts 🚧 [PR only] label Mar 12, 2023

jenseng added 4 commits March 12, 2023 14:22

Fix some wording, add a link

5bf40ac

Tweak submitter wording/links, add text around form* attrs

3c99a36

Add release note entry

593fed5

jenseng force-pushed the form-data-submitter branch from 9ac622d to 593fed5 Compare March 12, 2023 20:27

github-actions bot removed the merge conflicts 🚧 [PR only] label Mar 12, 2023

jenseng mentioned this pull request Mar 12, 2023

Add FormData constructor submitter parameter mdn/browser-compat-data#19106

Merged

Elchi3 reviewed Mar 13, 2023

View reviewed changes

files/en-us/glossary/submit_button/index.md Outdated Show resolved Hide resolved

Remove tags

1cfb20b

dipikabh mentioned this pull request Mar 13, 2023

docs(relnote): Release notes prep for Fx111 #25299

Merged

Elchi3 approved these changes Mar 14, 2023

View reviewed changes

Elchi3 merged commit 37370d5 into mdn:main Mar 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Document the FormData constructor submitter parameter #23950

Document the FormData constructor submitter parameter #23950

jenseng commented Jan 28, 2023 •

edited

Loading

jenseng commented Jan 28, 2023

github-actions bot commented Jan 30, 2023 •

edited

Loading

jenseng commented Jan 30, 2023

jpmedley Jan 30, 2023 •

edited

Loading

jenseng Jan 30, 2023

jenseng Jan 30, 2023

jpmedley Jan 31, 2023

jenseng Jan 31, 2023 •

edited

Loading

github-actions bot commented Feb 24, 2023

github-actions bot commented Mar 3, 2023

jenseng commented Mar 9, 2023

jenseng commented Mar 9, 2023

github-actions bot commented Mar 12, 2023

Elchi3 left a comment

	- : A {{Glossary("submit button")}} that is a member of the `form`. If the `submitter` has a `name` attribute or is an `{{HtmlElement('input/image', '<input type="image">')}}`, it will be included in the form data set.
	- : A {{Glossary("submit button")}} that is a member of the `form`. If the `submitter` has a `name` attribute or is an `{{HtmlElement('input/image', '<input type="image">')}}`, the value of the name attribute will be included in the form data set.

Document the FormData constructor submitter parameter #23950

Document the FormData constructor submitter parameter #23950

Conversation

jenseng commented Jan 28, 2023 • edited Loading

Description

Motivation

Additional details

Related issues and pull requests

jenseng commented Jan 28, 2023

github-actions bot commented Jan 30, 2023 • edited Loading

jenseng commented Jan 30, 2023

jpmedley Jan 30, 2023 • edited Loading

Choose a reason for hiding this comment

jenseng Jan 30, 2023

Choose a reason for hiding this comment

jenseng Jan 30, 2023

Choose a reason for hiding this comment

jpmedley Jan 31, 2023

Choose a reason for hiding this comment

jenseng Jan 31, 2023 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Feb 24, 2023

github-actions bot commented Mar 3, 2023

jenseng commented Mar 9, 2023

jenseng commented Mar 9, 2023

github-actions bot commented Mar 12, 2023

Elchi3 left a comment

Choose a reason for hiding this comment

jenseng commented Jan 28, 2023 •

edited

Loading

github-actions bot commented Jan 30, 2023 •

edited

Loading

jpmedley Jan 30, 2023 •

edited

Loading

jenseng Jan 31, 2023 •

edited

Loading