Always Get A Checkbox $_POST Value

The problem with checkboxes is that if they are not checked then they are not posted with your form. If you check a checkbox and post a form you will get the value of the checkbox in the $_POST variable which you can use to process a form, if it's unchecked no value will be added to the $_POST variable.

In PHP you would normally get around this problem by doing an isset() check on your checkbox element. If the element you are expecting isn't set in the $_POST variable then we know that the checkbox is not checked and the value can be false.

if(!isset($_POST['checkbox1']))
{
     $checkboxValue = false;
} else {
     $checkboxValue = $_POST['checkbox1'];
}

But if you have created a dynamic form then you won't always know the name attribute of your checkboxes, if you don't know the name of the checkbox then you can't use the isset function to check if this has been sent with the $_POST variable.

To get around this problem you can use a new hidden element which will store the true value of the checkbox. What you need to do is create a hidden element and use Javascript to change the value of the hidden field to the true value of the checkbox.

If you don't set a value of the checkbox then when the checkbox is checked and the form is submitted the value will come through as on. You can change this by setting the value attribute on your checkbox.

<input type="checkbox" name="checkbox1" value="1" />

But because there is no unchecked value we won't know if this checkbox isn't checked. This is where the hidden element will be useful.

<input type="checkbox" name="checkbox1_checkbox" id="checkbox1_checkbox" />
<input type="hidden" name="checkbox1" value="0" />

When we submit these elements we will now always get the hidden element checkbox1 but may or may not get the element checkbox1_checked depending on if the checkbox is checked. The problem we have now is that we need to find a way of changing the value in the hidden field once the checkbox has been clicked, which can be done with the following Javascript.

$('input[type="checkbox"]').on('change', function(e){
        if($(this).prop('checked'))
        {
            $(this).next().val(1);
        } else {
            $(this).next().val(0);
        }
});

This Javascript will be applied to all checkboxes, on the click event of each checkbox we see if the checkbox is currently checked. If it is checked then we get the next element (which should be the hidden field) and change the value to our checked value. If the checkbox is not checked then we get the hidden field and change the value to the unchecked state.

Now when we post the form we will always get the true checkbox value even if the checkbox isn't checked. This will allow us to create a dynamic form with checkboxes and know if they have been checked or unchecked.