FormData should work with all form elements

[LucaMele]

This code:

const form = document.querySelector('form');
return Object.fromEntries(new FormData(form).entries());

Should always return key/value pairs where key is name of the element and value is the selected value or the inserted text.

At the moment, if a form has datepicker or dropdown it wont serialise it

[AndyOGo]

Hi all,
support for related Form API's like FormData, HTMLFormElement.elements, HTML5 Form Validation, Autofill etc. is still in the process of standardisation.

Here are the official tickets:

• Need callback for form submit data WICG/webcomponents#187 (meanwhile closed and resulted in below issues)
• Form-associated custom elements: being a submit button WICG/webcomponents#814
• Form associated custom elements: implicit submission WICG/webcomponents#815
• Form autocompletion is broken when form elements are encapsulated within a Shadow DOM WICG/webcomponents#649

And here some SO discussion:

• https://stackoverflow.com/questions/54370436/can-i-get-a-button-in-shadowdom-to-submit-a-form-not-in-shadowdom
• https://stackoverflow.com/questions/38623176/how-can-i-create-a-web-component-that-acts-like-a-form-element

Hope this helps.

[markus-walther]

Dropdown and Datepicker do not have ShadowDOM.

Directly constructing onsubmit=".... new FormData(this) ... works in Storybook and has formed the basis for a dropdown form-submission e2e test for some time.

This is therefore tentatively a browser bug.

This code:

const form = document.querySelector('form');
return [...form.elements].filter(element => element.name).map( x => ({name:x.name,value:x.value}))

works and avoids FormData.

[danyball]

@LucaMele can we close this one?

[01231]

Closing due to inactivity. Reopen if necessary.

[LucaMele]

For me this is important. Forms element under WC should behave like forms. We have no shadow dom so as long as we add name everywhere it should work