When you disable the fieldset element before reading the form data using the FormData constructor, the data will be empty.
// Find my form
const $form = document.querySelector('.my-form')
// Find all fieldsets inside my form
const $fieldsets = $form.querySelectorAll('fieldset')
// Set all fieldsets as disabled
if($fieldsets.length) {
$fieldsets.forEach($fieldset => {
$fieldset.setAttribute('disabled', true)
})
}
// Construct FormData from the form
const formData = new FormData($form)
// You cannot log formData directly
console.log(Array.from(formData))
// Output: [] - doesn't work
So, if you want to disable the fieldset element, you should do it after using the FormData constructor.
// Find my form
const $form = document.querySelector('.my-form')
// Find all fieldsets inside my form
const $fieldsets = $form.querySelectorAll('fieldset')
// Construct FormData from the form
const formData = new FormData($form)
// You cannot log formData directly
console.log(Array.from(formData))
// Output: [] - works
// Set all fieldsets as disabled
if($fieldsets.length) {
$fieldsets.forEach($fieldset => {
$fieldset.setAttribute('disabled', true)
})
}
Also, if your fields are disabled, they won’t be included in the FormData, too.
Here’s a little demo of what works and what doesn’t work.
Top comments (5)
As intended, plus “disabled” is a terrible experience for screen reader users as the field becomes hidden and you can’t then read the information in it.
Instead use
readonlyand then you can style it in CSS with[readonly]{}to make it look disabled 👍I never thought of it, but this is golden advise. Cheers!
No probs! I honestly didn’t know that for data excluded it also so thanks for the TIL! ❤️
Yes, I didn't know that either. That's why I wrote the article and that's why I requested to add it to the MDN article: developer.mozilla.org/en-US/docs/W....
It makes sense, because disabled form fields will not add their data in submission.