Checkboxes Not Passing Multiple for Gatsby Site through Netlify Form

[jonathanc]

Having trouble with my form submitting correctly.

I would like to have multiple checkbox values being passed through the form if one is selected but it is only sending one. Also, for some reason my first value is being marked as “name” instead of setting. The code is below along with what’s being passed to Netlify Forms. Thanks for the help!

function encode(data) {
  const formData = new FormData();

  for (const key of Object.keys(data)) {
    formData.append(key, data[key]);
  }

  return formData;
}

class CSM2020 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleSubmit = e => {
    e.preventDefault();
    const form = e.target;
    fetch("/", {
      method: "POST",
      body: encode({
        "form-name": form.getAttribute("name"),
        ...this.state
      })
    })
      .then(() => navigateTo(form.getAttribute("action")))
      .catch(error => alert(error));
  };

  render() {
    return (
      <Layout location={this.props.location}>
        <Helmet
          htmlAttributes={{ lang: "en" }}
          title="CSM 2020 | Advanced Travel Therapy"
          meta={[
            {
              name: "description",
              content:
                "Enter to win our Travel Adventure pack!"
            }
          ]}
        />
        <div className="site-body page-content">
          <h1>CSM 2020</h1>
          <p>
             Enter to win our Travel Adventure pack!
          </p>
          <div className="grid grid-gutters-lg">
            <div className="grid-cell">
              <form
                name="CSM 2020"
                method="post"
                action="/csm-2020/"
                data-netlify="true"
                data-netlify-honeypot="bot-field"
                onSubmit={this.handleSubmit}
              >
                <div className="grid grid-gutters-sides grid-full med-grid-1of2">
                {/* The `form-name` hidden field is required to support form submissions without JavaScript */}
                <input type="hidden" name="form-name" value="file-upload" />
                <p hidden>
                  <label>
                    Don’t fill this out:{" "}
                    <input name="bot-field" onChange={this.handleChange} />
                  </label>
                </p>
                <div className="grid-cell">
                <label>
                  First Name
                  <sup>*</sup>
                <input
                  type="text"
                  id="firstNameField"
                  name="firstName"
                  placeholder=""
                  onChange={this.handleChange}
                  required
                />
                </label>
                </div>
                <div className="grid-cell">
                <label>
                  Last Name
                  <sup>*</sup>
                <input
                  type="text"
                  id="lastNameField"
                  name="lastName"
                  placeholder=""
                  onChange={this.handleChange}
                  required
                />
                </label>
                </div>
                <div className="grid-cell">
                <label>
                  Email
                  <sup>*</sup>
                <input
                  type="email"
                  id="emailField"
                  name="email"
                  placeholder=""
                  onChange={this.handleChange}
                  required
                />
                </label>
                </div>
                <div className="grid-cell">
                <label>
                  Phone
                  <sup>*</sup>
                <input
                  type="tel"
                  id="phoneField"
                  name="phone"
                  pattern="[0-9]{3} [0-9]{3} [0-9]{4}" 
                  maxlength="12"
                  placeholder=""
                  onChange={this.handleChange}
                  required
                />
                </label>
                </div>
                <div className="grid-cell">
                <label>
                  City
                  <sup>*</sup>
                <input
                  type="text"
                  id="city"
                  name="City"
                  placeholder=""
                  onChange={this.handleChange}
                />
                </label>
                </div>
                <div className="grid-cell">
                <label>
                  State
                  <sup>*</sup>
                <input
                  type="text"
                  id="state"
                  name="State"
                  placeholder=""
                  onChange={this.handleChange}
                  required
                />
                </label>
                </div>
                <div className="grid-cell">
                <label>
                  Anticipated Graduation Date
                  <sup>*</sup>
                <input
                  type="date"
                  id="gradDate"
                  name="Graduation Date"
                  placeholder=""
                  onChange={this.handleChange}
                  required
                />
                </label>
                </div>
                <div className="grid-cell">
                <label>
                  Discipline
                  <sup>*</sup>

                  <select name="Discipline[]" value={this.state.value} onChange={this.handleChange} id="discipline">
                  <option value="PT" >Physical Therapist</option>
                  <option value="SLP" >Speech Language Pathologist</option>
                  <option value="OT" >Occupational Therapist</option>
                  <option value="PTA" >Physical Therapy Assistant</option>
                  <option value="SLPA" >Speech Language Pathologist Assistant</option>
                  <option value="COTA" >Occupational Therapy Assistant</option>
                  <option value="CF" >Clinical Fellow</option>
                  <option value="SP" >School Psychologist</option>
                </select>
                </label>
                </div>
                <div className="grid-cell u-full">
                <label>
                  Settings Interested In
                  <sup>*</sup>
                <br />
                <div className="label-checkbox">
                <input type="checkbox" name="setting[]" id="setting1" value="Acute" onChange={this.handleChange} />
                <label className="label-inline" for="setting1">Acute</label>
                <input type="checkbox" name="setting[]" id="setting2" value="Skilled Nursing Facility" onChange={this.handleChange} />
                <label className="label-inline" for="setting2">Skilled Nursing Facility</label>
                <input type="checkbox" name="setting[]" id="setting3" value="School" onChange={this.handleChange} />
                <label className="label-inline" for="setting3">School</label>
                <input type="checkbox" name="setting[]" id="setting4" value="Home Health" onChange={this.handleChange} />
                <label className="label-inline" for="setting4">Home Health</label>
                <input type="checkbox" name="setting[]" id="setting5" value="Outpatient" onChange={this.handleChange} />
                <label className="label-inline" for="setting5">Outpatient</label>
                <input type="checkbox" name="setting[]" id="setting6" value="Inpatient" onChange={this.handleChange} />
                <label className="label-inline" for="setting6">Inpatient</label>
                </div>
                </label>
                </div>
                <div className="grid-cell u-full">
                  <button type="submit">Submit</button>
                </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </Layout>
    );
  }
}

export default CSM2020;

[jen]

Hey, welcome to the forum

This doc describes a lot of common issues with forms, so it’s a good starting place:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

And then this person described a similar problem & fix:

Form submission not showing multiple checkbox values

Hi, I am testing out sending a basic form using Netlify with checkbox groups to select multiple checkboxes at once. However, when the form is sent, it only ever returns the last checkbox value selected, not ALL of them. Right now I’m using basic html5 markup for the checkboxes (with the same name attribute for them all because they are in a group). I’ve tried removing the extraneous javascript that turns the form into steps, I’ve even tried wrapping them in a fieldset, but no luck. I am submit…

If those don’t work, instructions for what to send us are at the bottom of the first post. Want to take a look and let me know how it goes?

[jonathanc]

Thanks, but I do have a “name” for each one and it doesn’t work. Some additional details below.

https://events.advancedtraveltherapy.com/csm-2020/
Code is above
Form name: CSM 2020
Not getting any errors for build or in console
Have tried adding and removing "[ ]" for the name. For example, name="setting[]" vs name="setting" and neither have worked.

[jen]

Just tested and had a look at the POST that was sent from your site. I think the issue might be your content-type header:

@Dennis

Make sure that you POST your form request (not GET) with a Content-Type of application/x-www-form-urlencoded in most cases. However, if and only if you are submitting the form with a file upload then the Content-Type needs to be multipart/form-data instead.

Let me know if that fixes the issue.

[jonathanc]

That didn’t fix the issue either whenever I changed that the form wouldn’t send anything. It’s weird because everything else in the form is passing through fine, just this is the problem.

One of the really bizarre things, that may point to the problem, is the fact that the “name” isn’t getting passed through correctly for the checkboxes. It says Acute instead of Setting as you can see in the screenshot from the first post.

[jen]

Looks like possibly an issue with your <br/> tag- try <br> instead?

[jonathanc]

Just went ahead and deleted <br /> completely and still the same problem unfortunately.

[Dennis]

Hi @jonathanc, I checked your form and it looks like you are using the for attribute in your label tags for your checkboxes. Our form handling does not handle label tags with for attributes very well. Since you are already wrapping your checkbox with the label, the for attributes is not needed so it’s safe to remove. Let me know if that helps.

[raygesualdo]

I think the issue is actually with the handleChange method. It will always overwrite the current value of e.target.name with the currently selected value. You would probably need to make handleChange smarter to handle when e.target.name includes the string “” and have it push or pop values into an array instead of setting them directly.

Here’s some pseudo-code that’s in no way guaranteed to work:

handleChange = e => {
  const name = e.target.name
  if (name.includes('[]')) {
    this.setState(state => {
      let array = state[name] || []
      array = e.target.checked === true ? [...array, e.target.value] : array.filter(element => element !== e.target.value)
      return {
       ...state,
       [name]: array
    })
  } else {
    this.setState({ [e.target.name]: e.target.value });
  }
};

You’d also have to check how FormData serializes an array of values.