CODEWITHSUNDEEP
javascript
Gary Rozanski
Gary Rozanski

Reputation: 1

checked/unchecked checkboxes

I am trying to pass a value for when a checkbox is either in a checked state or if it's not checked.

However, it doesn't appear to pass the non-checked state. the code I am using is below: 

if (document.getElementById('PRODUCT_REVIEW_EMAILS_FIELD').checked == true){
            document.getElementById('PRODUCT_REVIEW_EMAILS_FIELD').value = 'on';
            }
        else {
            document.getElementById('PRODUCT_REVIEW_EMAILS_FIELD').value = 'off';
            }

I have added an alert:

alert(document.getElementById('PRODUCT_REVIEW_EMAILS_FIELD').value);

which surprisingly shows the 'off' value - however - this isn't passed successfully.

What am I missing?

Upvotes: 0

Views: 320

Answers (3)

fizmax
fizmax

Reputation: 577

You can do it on the server side so not to relay on JavaScript. To do it you must add a reference input field right before every checkbox.

<form>
  <input type="hidden" name="checkboxes" value="reference"/>
  <input type="checkbox" name="checkboxes" value="checked"/>
</form>

This will make parameters come in array of values: "reference-checked" sequence if checkbox is checked and just "reference" if it is unchecked. You can have arbitrary amount of such checkboxes, this will not affect your logic.

Now for the server side. Assuming that you get your 'checkboxes' as a String array, here's the logic (in Java) to parse the values:

List<Boolean> parsed = new ArrayList<Boolean>();
for (int i = 0; i < checkboxes.length; i++) {
    if (i < checkboxes.length - 1 && "checked".equals(checkboxes[i + 1])) {
        parsed.add(true);
        i++;
    else {
        parsed.add(false);
    }
}

Now you have a nice array of booleans that correlates to the order, amount and state of checkboxes you have.

Upvotes: 0

John Hartsock
John Hartsock

Reputation: 86892

You can handle the true on/off values of a checkbox this way (will post when checkbox is on and off). Basically this uses a hidden form field with the name PRODUCT_REVIEW_EMAILS_FIELD and populates it with the value. Hidden form fields always post.

<form>
  <input id="tempCheckbox" type="checkbox" name="Temp_PRODUCT_REVIEW_EMAILS_FIELD">
  <input id="checkboxvalue" type="hidden" name="PRODUCT_REVIEW_EMAILS_FIELD" value="Off">
</form>

<script type="text/javascript">
  document.getElementById("tempCheckbox").onclick = function () {
    if (this.checked) {
      document.getElementById("checkboxvalue").value = "On";
    }
    else {
      document.getElementById("checkboxvalue").value = "Off";
    }
  }
  // used to run on page load to verify the correct value is set incase your server side
  // script defaults the checkbox to on
  document.getElementById("tempCheckbox").onclick(); 
</script>

Upvotes: 1

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385395

This is normal, expected and well-defined behaviour.

  • Checkboxes have an arbitrary value;
  • When a checkbox's checked attribute is on, it is submitted as part of a form with that value;
  • When a checkbox's checked attribute is off, it is not submitted at all.

HTML 4.01 says:

Checkboxes (and radio buttons) are on/off switches that may be toggled by the user. A switch is "on" when the control element's checked attribute is set. When a form is submitted, only "on" checkbox controls can become successful.

And:

When the user submits a form (e.g., by activating a submit button), the user agent processes it as follows.

  • Step one: Identify the successful controls
  • Step two: Build a form data set A form data set is a sequence of control-name/current-value pairs constructed from successful controls. [..]

HTML5 says similar things.

You could write your back-end code to expect fields with a certain name, and react accordingly when they are missing.

Upvotes: 2

Related Questions