How do I get multiple checkbox values in FormData?

Question

My html form has multiple checkboxes with the same name attribute:

<form id='cheese-selector'>
  <input type="checkbox" name="cheese" id="limburger" value="Limburger">Limburger</input>
  <input type="checkbox" name="cheese" id="camembert" value="Camembert">Camembert</input>
  <input type="checkbox" name="cheese" id="roquefort" value="Roquefort">Roquefort</input>
  <input type="submit" id="pick-cheese">Pick My Cheese!</input>
</form>

I'm submitting it via ajax. When I make a FormData object, only the first selected checkbox is included, even if I've checked more than one:

$('#limburger').click()
$('#camembert').click()
console.log(FormData(this).get('cheese'))
// 'Limburger'

How do I make FormData encode all the checked values as an array?

Quentin · Accepted Answer · 2020-04-18 20:45:25Z

19

See MDN:

The get() method of the FormData interface returns the first value associated with a given key from within a FormData object. If you expect multiple values and want all of them, use the getAll() method instead.

answered Apr 18, 2020 at 20:45

community wiki

Quentin

Sign up to request clarification or add additional context in comments.

4 Comments

Paul D. Waite Over a year ago

So, reliably getting all the data from unknown HTML forms, in the same form that a web browser would submit it, is not trivial with FormData.

Quentin Over a year ago

@PaulD.Waite — No. Just use getAll.

Quentin Feb 14 at 17:07

@Plummer — The use case in the question calls for only sending the data for the checked checkboxes.

Plummer Feb 14 at 19:38

@Quentin in terms of the original question, yes. I was relaying context in regard to the client.

Plummer · Accepted Answer · 2025-02-14 19:41:46Z

0

Expanding on the discussion in comments to the accepted answer, FormData methods don't return checkbox inputs if they are not checked.

This is true for entries(), getAll(), and keys().

has() also will return false for a name if it is not checked. If a consumer doesn't have reference to the form schema, then FormData will not return any unchecked checkbox input names.

One way around this would be to add a <input type="hidden" /> with the same name as the checkbox group. This would reliably ensure that the field key would be present.

answered Feb 14 at 19:41

Plummer

6,71813 gold badges49 silver badges79 bronze badges

Collectives™ on Stack Overflow

How do I get multiple checkbox values in FormData?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related