Does <input type=“checkbox” /> only post dat

Question

Is it standard behaviour for browsers to only send the checkbox input value data if it is checked upon form submission?

And if no value data is supplied, is the default value always "on"?

Assuming the above is correct, is this consistent behaviour across all browsers?

Answer 1

input type="hidden" name="is_main" value="0"

input type="checkbox" name="is_main" value="1"

so you can control like this as I did in the application. if it checks then send value 1 otherwise 0

Answer 2

I have a page (form) that dynamically generates checkbox so these answers have been a great help. My solution is very similar to many here but I can't help thinking it is easier to implement.

First I put a hidden input box in line with my checkbox , i.e.

 <td><input class = "chkhide" type="hidden" name="delete_milestone[]" value="off"/><input type="checkbox" name="delete_milestone[]"   class="chk_milestone" ></td>

Now if all the checkboxes are un-selected then values returned by the hidden field will all be off.

For example, here with five dynamically inserted checkboxes, the form POSTS the following values:

  'delete_milestone' => 
array (size=7)
  0 => string 'off' (length=3)
  1 => string 'off' (length=3)
  2 => string 'off' (length=3)
  3 => string 'on' (length=2)
  4 => string 'off' (length=3)
  5 => string 'on' (length=2)
  6 => string 'off' (length=3)

This shows that only the 3rd and 4th checkboxes are on or checked.

In essence the dummy or hidden input field just indicates that everything is off unless there is an "on" below it which then gives you the index you need without a single line of code.

.

Answer 3

If checkbox isn't checked then it doesn't contribute to the data sent on form submission.

HTML5 section 4.10.22.4 Constructing the form data set describes the way form data is constructed:

If any of the following conditions are met, then skip these substeps for this element: [...]

The field element is an input element whose type attribute is in the Checkbox state and whose checkedness is false.

and then the default valued on is specified if value is missing:

Otherwise, if the field element is an input element whose type attribute is in the Checkbox state or the Radio Button state, then run these further nested substeps:

If the field element has a value attribute specified, then let value be the value of that attribute; otherwise, let value be the string "on".

Thus unchecked checkboxes are skipped during form data construction.

Similar behavior is required under HTML4. It's reasonable to expect this behavior from all compliant browsers.

Answer 4

Checkboxes are posting value 'on' if and only if the checkbox is checked. Insted of catching checkbox value you can use hidden inputs

JS:

var chk = $('input[type="checkbox"]');
    chk.each(function(){
        var v = $(this).attr('checked') == 'checked'?1:0;
        $(this).after('<input type="hidden" name="'+$(this).attr('rel')+'" value="'+v+'" />');
    });

chk.change(function(){ 
        var v = $(this).is(':checked')?1:0;
        $(this).next('input[type="hidden"]').val(v);
    });

HTML:

<label>Active</label><input rel="active" type="checkbox" />

Answer 5

Just like ASP.NET variant, except put the hidden input with the same name before the actual checkbox (of the same name). Only last values will be sent. This way if a box is checked then its name and value "on" is sent, whereas if it's unchecked then the name of the corresponding hidden input and whatever value you might like to give it will be sent. In the end you will get the $_POST array to read, with all checked and unchecked elements in it, "on" and "false" values, no duplicate keys. Easy to process in PHP.

Answer 6

From HTML 4 spec, which should be consistent across almost all browsers:

http://www.w3.org/TR/html401/interact/forms.html#checkbox

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.

Successful is defined as follows:

A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.