FormData doesn’t include disabled fieldsets

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.

Comments

[GrahamTheDev]

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 readonly and then you can style it in CSS with [readonly]{} to make it look disabled 👍

[Silvestar Bistrović]

I never thought of it, but this is golden advise. Cheers!

[GrahamTheDev]

No probs! I honestly didn’t know that for data excluded it also so thanks for the TIL! ❤️

[Silvestar Bistrović]

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....

[Alex Lohr]

It makes sense, because disabled form fields will not add their data in submission.