How To Set Value Of Unchecked Checkbox When Submitting To PHP?

Checkboxes usually represent binary data that are stored in the database as Yes/No, Y/N, or 1/0 values. HTML checkboxes do have bad nature to sending value to the server only if the checkbox is checked! That means that server scripts on another site must know in advance what are all the possible checkboxes on the web page in order to be able to store positive (checked) or negative (unchecked) values.

Actually, only negative values are a problem (when the user unchecks previously (pre)checked value – how can the server know this when nothing is sent if it does not know in advance that this name should be sent)? If you have a server-side script that dynamically creates an UPDATE script there’s a problem because you don’t know what all checkboxes should be received in order to set the Y value for checked and N value for unchecked (not received) ones.

Features:

1. Light Weight.
2. Pure JavaScript/PHP.
3. Cross Browser.
4. No JQuery Files.
5. Fully Customizable.
6. PHP $_POST Supported.

It’s time for me to solve the mystery of HTML unchecked checkbox values. I guess it would be the most searched trick about basic HTML forms and checkboxes. When you use checkboxes on our website, you save some values to the checkboxes. But how do you save the unchecked value to it?

I had the same problem when I was working on a recent project of mine, but I searched and found a great solution to this problem. The solution is to insert a hidden form input field with the same name as our checkbox and put the default value right before the place where the checkbox is located in our form:

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

When the checkbox is left unchecked by the user, the hidden field’s value gets submitted. Otherwise, the value of the checked box will be sent.

Way To Cover DrawBack Of This Trick:

If you add this code:

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>

The browser will not really care about what you do here. The browser will send both parameters to the server, and the server has to decide what to do with them. PHP for example takes the last value as the one to use.

The solution for this is to remove duplicates at the PHP receiving side as follows.

 $posted = array_unique($_POST['checkbox_name']);
  foreach($posted as $value){
    print $value;
  }

But other systems I worked with (based on Java) do it the way around – they offer you only the first value. .NET instead will give you an array with both elements instead

Another Way To Cover This Drawback:

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;
    }
}

Bonus Way To Trick This Drawback:

I solved it by using vanilla JavaScript:

<input type="hidden" name="checkboxName" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">

Be careful not to have any spaces or line breaks between these two input elements! You can use this.previousSibling.previousSibling to get “upper” elements.

With PHP you can check the named hidden field for 0 (not set) or 1 (set).

Customization:

No need to customize it. Just copy-paste. Rest edit the code as per comments and need.

Troubleshooting the Errors:

Do it with concentration and patience. Check your all steps again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.