Multiple checkboxes with the same name are not handled correctly

If a set of checkboxes have the same name the HTML form encoding is different to those with different names.

This was the first thing I tried with the Forms and I find the form is not show all the items.

---
permalink: course-list/form-test
---

{% include netlify-form.liquid type="start" id="form" %}

<fieldset class="field" id="course-learning">
    <legend class="label">Scheduling (Required)</legend>
    <p class="expl">Indicate the type of activities provided in this resource. Choose as many as apply.</p>
    <div class="radio-field">
        <input type="checkbox" id="course-learning-scheduled" name="course-learning-scheduled" group="learning" required>
        <label for="course-learning-scheduled">Scheduled - participants are required to attend at a specific time</label>
    </div>
    <div class="radio-field">
        <input type="checkbox" id="course-learning-not-scheduled" name="course-learning-not-scheduled" group="learning">
        <label for="course-learning-not-scheduled">Unscheduled - participants can attend at their own pace</label>
    </div>
</fieldset>

<fieldset class="field" id="course-audience">
    <legend class="label">Audience (Required)</legend>
    <div class="radio-field">
      <input type="checkbox" name="course-audience" id="course-audience-content-author" value="course-audience-content-author" group="audience" required>
      <label for="course-audience-content-author">Content Author</label>
    </div>
    <div class="radio-field">
      <input type="checkbox" name="course-audience" id="course-audience-designer" value="course-audience-designer" group="audience" >
      <label for="course-audience-designer">Designer</label>
    </div>
    <div class="radio-field">
      <input type="checkbox" name="course-audience" id="course-audience-developer" value="course-audience-developer" group="audience" >
      <label for="course-audience-developer">Developer</label>
    </div>
    <div class="radio-field">
      <input type="checkbox" name="course-audience" id="course-audience-manager" value="course-audience-manager" group="audience" >
      <label for="course-audience-manager">Manager</label>
    </div>
    <div class="radio-field">
      <input type="checkbox" name="course-audience" id="course-audience-tester" value="course-audience-tester" group="audience" >
      <label for="course-audience-tester">Tester</label>
    </div>
    <div class="radio-field">
      <input type="checkbox" name="course-audience" id="course-audience-other" value="course-audience-other" group="audience" >
      <label for="course-audience-other">Other</label>
    </div>
  </fieldset>

  <button type="submit">Send information</button>

{% include netlify-form.liquid type="end"%}

When multiple checkboxes are selected for the first group they correctly show in the Forms control panel as having a value of “on”. The second group however does not show the array of values. They show in FFx F12 tools

Hi @slim,

Could we see the site in question?

Oh, sorry I forgot to add that. The site does a little pre submit logic but that can;t be affecting the form content encoding. I also use liquid includes to create the form element - but the generated code all looks fine to me.

The github preview mangles this page :frowning:
https://github.com/w3c/wai-course-list/blob/steve-submit/content/form-test.md

I’ve added form integration but please feel free to submit forms.

Thanks

I believe this is expected, because that’s the data being sent by the browsers. I mean, here’s Chrome:

We show the value for the last data with the same name. I think you’d have to use different names for each of these.

Yes that is the bug. You are not correctly handling valid encoded form data. See the MDN article or HTML specification.

We can work around as you say though so its not a deal breaker. Just annoying, In fact it does mean consistent data handling down stream :slight_smile:

Thank you for that @slim. A bug has been filed for the engineers.

Thanks. Realistically this will be low priority as it’s obscure and somewhat impracticable to use.

The only reason I had code using identical ‘name’ attribs, remembered it was valid and checked the spec was that the original developer of the code I copied for testing with Netlfy forms was trying to various options out as an experiment.

Thanks again!

1 Like