Post Unchecked HTML Checkboxes

POST unchecked HTML checkboxes

Add a hidden input for the checkbox with a different ID:

<input id='testName' type='checkbox' value='Yes' name='testName'>
<input id='testNameHidden' type='hidden' value='No' name='testName'>

Before submitting the form, disable the hidden input based on the checked condition:

form.addEventListener('submit', () => {
    if(document.getElementById("testName").checked) {
        document.getElementById('testNameHidden').disabled = true;
    }
}

POST unchecked HTML checkboxes

Add a hidden input for the checkbox with a different ID:

<input id='testName' type='checkbox' value='Yes' name='testName'>
<input id='testNameHidden' type='hidden' value='No' name='testName'>

Before submitting the form, disable the hidden input based on the checked condition:

form.addEventListener('submit', () => {
    if(document.getElementById("testName").checked) {
        document.getElementById('testNameHidden').disabled = true;
    }
}

Why we cannot POST unchecked checkbox?

W3C explains that only controls that are "successful" are submitted.

A successful control is "valid" for submission.

• All "on" checkboxes may be successful.

Similarly, for radio buttons, only the "on" radio buttons are "successful", for menus, only the selected options are "successful".

How to submit 0 if checkbox is unchecked and submit 1 if checkbox is checked in HTML

Simplest one, no javascript required, just put a hidden input before the checkbox:

<input type="hidden" name="check[0]" value="0" />
<input type="checkbox" name="check[0]" value="1" />

Inputs need to have the same name. If the checkbox is checked then value 1 will be submitted, otherwise value 0 from the hidden input.

Your case javascript solution, no hidden inputs needed:

<script type="text/javascript">
    // when page is ready
    $(document).ready(function() {
         // on form submit
        $("#form").on('submit', function() {
            // to each unchecked checkbox
            $(this + 'input[type=checkbox]:not(:checked)').each(function () {
                // set value 0 and check it
                $(this).attr('checked', true).val(0);
            });
        })
    })
</script>

<form method="post" id="form">
    <input type="checkbox" name="check[0]" value="1" />
    <input type="checkbox" name="check[1]" value="1" />
    <input type="submit" value="Save Changes" />
</form>

PHP solution, no hidden inputs needed:

<?php
    // if data is posted, set value to 1, else to 0
    $check_0 = isset($_POST['check'][0]) ? 1 : 0;
    $check_1 = isset($_POST['check'][1]) ? 1 : 0;
?>

<form method="post">
    <input type="checkbox" name="check[0]" value="1" />
    <input type="checkbox" name="check[1]" value="1" />
    <input type="submit" value="Save Changes" />
</form>

EDIT: the javascript solution is not valid anymore as of jquery 1.6. Based on this, a more proper solution is the following:

<script type="text/javascript">
    // when page is ready
    $(document).ready(function() {
         // on form submit
        $("#form").on('submit', function() {
            // to each unchecked checkbox
            $(this).find('input[type=checkbox]:not(:checked)').prop('checked', true).val(0);
        })
    })
</script>

<form method="post" id="form">
    <input type="checkbox" name="check[0]" value="1" />
    <input type="checkbox" name="check[1]" value="1" />
    <input type="submit" value="Save Changes" />
</form>

Why are unchecked checkboxses ignored when posting a form?

An unchecked checkbox is skipped when constructing form data due to the HTML specification https://www.w3.org/TR/html50/forms.html#constructing-form-data-set and it has been that way for a long time.

Option 1:

Add a hidden field with the same name and a falsy value when the field is unchecked using Javascript.

Option 2:

Add a hidden field to specify that the checkbox field is being submitted. This can be useful in some cases where you may want to exclude processing if the checkbox isn't part of the submission.

---

Related Topics