Submit an HTML form with empty checkboxes

I have an HTML form - with PHP, I am sending the data of the form into a MySQL database. Some of the answers to the questions on the form have checkboxes. Obviously, the user does not have to tick all checkboxes for one question. I also want to make the other questions (including radio groups) optional.

However, if I submit the form with empty boxes, radio-groups etc, I received a long list of 'Undefined index' error messages for each of them.

How can I get around this? Thanks.

Solution 1:

I've used this technique from time to time:

<input type="hidden" name="the_checkbox" value="0" />
<input type="checkbox" name="the_checkbox" value="1" />

note: This gets interpreted differently in different server-side languages, so test and adjust if necessary. Thanks to SimonSimCity for the tip.

Solution 2:

Unchecked radio or checkbox elements are not submitted as they are not considered as successful. So you have to check if they are sent using the isset or empty function.

if (isset($_POST['checkbox'])) {
    // checkbox has been checked
}

Solution 3:

An unchecked checkbox doesn't get sent in the POST data. You should just check if it's empty:

if (empty($_POST['myCheckbox']))
     ....
else
     ....

In PHP empty() and isset() don't generate notices.

Solution 4:

Here is a simple workaround using javascript:

before the form containing checkboxes is submitted, set the "off" ones to 0 and check them to make sure they submit. this works for checkbox arrays for example.

///// example //////

given a form with id="formId"

<form id="formId" onSubmit="return formSubmit('formId');" method="POST" action="yourAction.php">

<!--  your checkboxes here . for example: -->

<input type="checkbox" name="cb[]" value="1" >R
<input type="checkbox" name="cb[]" value="1" >G
<input type="checkbox" name="cb[]" value="1" >B

</form>

<?php


if($_POST['cb'][$i] == 0) {
    // empty
} elseif ($_POST['cb'][$i] == 1) {
    // checked
} else {
    // ????
}

?>


<script>

function formSubmit(formId){

var theForm = document.getElementById(formId); // get the form

var cb = theForm.getElementsByTagName('input'); // get the inputs

for(var i=0;i<cb.length;i++){ 
    if(cb[i].type=='checkbox' && !cb[i].checked)  // if this is an unchecked checkbox
    {
       cb[i].value = 0; // set the value to "off"
       cb[i].checked = true; // make sure it submits
    }
}

return true;

}

</script>