CODEWITHSUNDEEP
javascriptjqueryformscheckbox
KSechrist
KSechrist

Reputation: 61

javascript submit default value for unchecked checkboxes

In my form, I have a series of checkboxes for the user to agree to certain things. I don't need them to check them all or any specific ones, but I DO need the recipient of the email to easily tell which ones were not checked (terms they didn't agree with)

I have tried adding a hidden checkbox with the same name, but when the visible checkbox is checked, the email gets both responses, resulting in a confusing email.

Radio buttons aren't the answer because I just want the user to see a checkbox and check it (or not!)

fyi, php is not an available option. I would prefer javascript or jquery.

I'm not good with javascript but I tried the following and it didn't work (it sent both responses when the visible one was checked):

<input type="hidden" name="Name1" id="Hidden1" value="NOT ANSWERED" checked />
<input type="checkbox" name="Name1" id="Visible1" value="Yes" onchange="document.getElementById('Hidden1').checked = false;" />

Upvotes: 0

Views: 1002

Answers (1)

Miguel
Miguel

Reputation: 20633

Here's an example on how you can get a default value for an unchecked input using data attributes.

HTML

<form id="form">
  <input type="checkbox" name="terms_1" data-unchecked-value="not-agree" value="agree" checked />
  <input type="checkbox" name="terms_2" data-unchecked-value="not-agree" value="agree" />
  <button type="submit">
    submit
  </button>
</form>

JS

var form = document.querySelector('#form')

function getValue(node) {
  return node.checked ? node.value : node.dataset.uncheckedValue
}

form.addEventListener('submit', function(event) {
  event.preventDefault();

  var terms1 = getValue(this.terms_1)
  var terms2 = getValue(this.terms_2)

  console.log(terms1, terms2)
})

JSFiddle demo: https://jsfiddle.net/Lo6g7so5/1/

Upvotes: 2

Related Questions