I am available for hire!

Blog javascript forms

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.