DEV Community

Discussion on: How to easily convert HTML Form to JSON

View post

Replies for: You could also do this. It depends what processing you want to do afterwards. :) I've included both in here jsfiddle.net/8fL3vra1/ Where you can ru...

 
austingil profile image
Austin Gil •

Oh yeah, that would make sense. I usually give each checkbox its own name, and if they are related, I put them inside a <fieldset>. I'll need to remember this if I'm working with objects and want a list.

Usually I just wrap the data in a URLSearchParams and send it to the backend like that. URLSearchParams will handle the list if there are multiple entries with the same name.

document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target)
  const params = new URLSearchParams(formData)

  fetch(`https://example.com?${params.toString()}`)

  fetch(`https://example.com`, {
    method: 'POST',
    body: params
  })

  e.preventDefault()
})
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
ndrean profile image
NDREAN • • Edited

If you POST, I believe you can do directly body: new FormData(e.target)
if you GET and adjoin a query string, you may indeed need URLSearchParams

Thread Thread
 
austingil profile image
Austin Gil •

Ah yes. This is true. My only issue with this is using FormData in the request body changes the request headers from the default application/x-www-form-urlencoded to multipart/form-data. This has caused me issues before, so I try to avoid it.