Checkboxes Not Passing Multiple for Gatsby Site through Netlify Form

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;

Hey, welcome to the forum :slight_smile:

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

And then this person described a similar problem & fix:

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?

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.

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:

Let me know if that fixes the issue.

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.

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

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

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.

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.

2 Likes