CODEWITHSUNDEEP
javascripthtml
NoNam4
NoNam4

Reputation: 597

How to get checkbox value?

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.

enter image description here

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>

Upvotes: 0

Views: 1056

Answers (2)

Nosai
Nosai

Reputation: 53

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.

Upvotes: 1

ControlAltDel
ControlAltDel

Reputation: 35106

There are three things to think about here:

  1. Checkbox name (input.name): In this case material
  2. Checkbox value(input.value): The is the value of the checkbox
  3. 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

Upvotes: 0

Related Questions