How to get checkbox value?

Question

I'm trying to create simple form that will be send to google sheets and i receiving everything value except checkbox values. I keep getting value 'on' and i couldn't understand why.

var formData = new FormData();
document.querySelectorAll("form").forEach(f => {
  let obj = {};
  f.querySelectorAll("input").forEach(ele => obj[ele.name] = ele.value || "");
  for (const key in obj) {
        formData.append(key, obj[key]);
    }
})
const scriptURL = 'https://script.google.com/macros/s//exec'
      fetch(scriptURL,  { method: 'POST', body: formData})
            .then(response => alert("You have successfully submitted."))
            .catch(error => console.error('Error!', error.message))

    <div class="modal-body modal-body-step-5">
  <div class="title">Almost..</div>
  <div class="description">What type of materials do you want to install?</div>
  <form>
    <div class="control-group">
        <label class="control control-checkbox">
              Hardwood
              <input name="Materials" type="checkbox" value="Hardwood"/>
              <div class="control_indicator"></div>
       </label>
       <label  class="control control-checkbox">
              Vinyl
              <input name="Materials" type="checkbox" value="Vinyl"//>
              <div class="control_indicator"></div>
       </label>
       <label class="control control-checkbox">
              Laminate
              <input name="Materials" type="checkbox" value="Laminate"/>
              <div class="control_indicator"></div>
       </label>
       <label class="control control-checkbox">
              Other
              <input name="Materials" type="checkbox" value="Other"/>
              <div class="control_indicator"></div>
       </label>
    </div>
    <div class="text-center fade-in">
      <div class="button">Next</div>
    </div>
  </form>
</div>

Wouldn't a set of radio buttons make more sense in this situation? — DBS, May 19 '21 at 15:03
Does this answer your question? [Checkbox value is always 'on'](https://stackoverflow.com/questions/18377268/checkbox-value-is-always-on) — Robert Harvey, May 19 '21 at 15:08
Did you try adding event listener when the form submits?, maybe the problem is that you never get the values, you get, instead, the inputs without any checked checkbox — Matias Coco, May 19 '21 at 15:11

score 1 · Answer 1 · answered May 19 '21 at 15:09

As far as I am aware of, a value of a checkbox is only sent to the server when it is checked. If the checkbox is not checked, your backend will not be aware of the checkbox being anywhere in the body that was sent to the backend.

This means that the checkbox was checked if you received the on value from your checkbox and it was not checked if it is not present in the sent body.

I hope it makes sense and you can solve your problem.

score 0 · Answer 2 · answered May 19 '21 at 15:08

There are three things to think about here:

Checkbox name (input.name): In this case material
Checkbox value(input.value): The is the value of the checkbox
Checkbox checked / unchecked status (input.checked)

If the input is checked, the input's value will be sent on form submission under the value(s) for input.name

How to get checkbox value?

2 Answers2