In this tutorial, we will learn to POST unchecked HTML checkboxes.
To interact with a user, it is necessary to take their input or data through the website. The HTML forms are used to take input from the user. Forms are essential to take the data of the user on the website. These forms take input from the user and send data to the server using HTTP requests.
There are two types of HTTP requests one is GET, and the other is POST. The POST request is the most used type because it is secure and can send a large amount of data. But both these methods send the data whose values are changed or edited. So, the non-edited values or the unchecked checkboxes are not sent to the server.
So, let us look at how to POST unchecked HTML checkboxes from the form.
Using hidden input type
The hidden input type is an input field that will neither take input from the user, nor it will be displayed. This input field is only used to send the value of this field by default through the HTTP requests. This is a very important field for forming data and databases.
Without an HTML form, we cannot send the data to the server. To send the additional data on the server that is not taken from the user, we h**e to use the hidden input type in HTML.
Users can follow the below syntax to use hidden input type to post the unchecked HTML checkboxes −
Syntax
<input type = "checkbox" id = "Check" name = "CheckBox" value = "1"/> <input type = "hidden" id = "Checkhidden" name = "CheckBox" value = "0"/> <script> if(document.getElementById(" <Checkbox ID here> ").checked) { document.getElementById( <Hidden field id here> ).disabled = true; } </script>
Follow the above syntax to use the hidden input field.
Example 1
In the example below, we h**e used checkboxes in the form to take input from the user. We will see what we get after posting the data with checkboxes. We h**e added seven checkboxes in the form. After clicking the submit button, we will get the data sent from the post method from the form.
<html> <body> <h2> Using <i> POST method </i> to post the HTML checkboxes </h2> <form method="post" id="form" onsubmit="func(); return false"> Select your Subjects: <br> <input type="checkbox" id="group1" name="Subject" value="Math" /> <label for="group1"> Math </label><br> <input type="checkbox" id="group2" name="Subject" value="Science" /> <label for="group2"> Science </label><br> <input type="checkbox" id="group3" name="Subject" value="English" /> <label for="group3"> English </label> <br> <input type="checkbox" id="group4" name="Subject" value="History" /> <label for="group4"> History </label> <br> <input type="checkbox" id="group5" name="Subject" value="Geography" /> <label for="group5"> Geography </label> <br> <input type="checkbox" id="group6" name="Subject" value="Hindi" /> <label for="group6"> Hindi </label> <br> <input type="checkbox" id="group7" name="Subject" value="Information technology" /> <label for="group7"> Information technology </label> <br> <button> Submit </button> </form> <div id="output"> </div> <script> function func() { const form = document.getElementById('form'); const formData = new FormData(form); const output = document.getElementById('output'); output.style.color = "red"; for (const [key, value] of formData) { output.innerHTML += `${key}: ${value}` + '<br>'; } } </script> </body> </html>
In the above example, users can see that we will get only the values of the checkboxes that are checked, and only those values will send to the server.
Example 2
In the example below, we h**e used the hidden input type to send the data to the server whether the checkbox is checked. We are defining the hidden input type with the same name as other checkboxes in the form. In the script, we h**e given a condition that if the checkbox is checked, then the respected hidden field will be disabled. By this, we will not get the double value for the same checkbox.
<html> <body> <h2> Using <i> hidden type </i> of input to post unchecked HTML checkboxes </h2> <form method="post" action="#" onsubmit="func(); return false" id="form"> <label for="fname"> Enter your name: </label> <input type="text" id="fname" name="Fname" value="" /> <br> <label for="lname"> Enter your name: </label> <input type="text" id="lname" name="Lname" value="" /> <br> Select your gender: <br> <input type="hidden" id="maleHidden" name="Gender" value="He is not a male" /> <input type="checkbox" id="male" name="Gender" value="male" /> <label for="male"> Male </label> <br> <input type="hidden" id="femaleHidden" name="Gender" value="He is not a female" /> <input type="checkbox" id="female" name="Gender" value="female" /> <label for="female"> Female </label> <br> <input type="hidden" id="transgenderHidden" name="Gender" value="He is not a transgender" /> <input type="checkbox" id="transgender" name="Gender" value="transgender" /> <label for="transgender"> Transgender </label> <br> <button> Submit </button> <div id="output"> </div> </form> <script> function func() { if (document.getElementById("male").checked) { document.getElementById('maleHidden').disabled = true; } if (document.getElementById("female").checked) { document.getElementById('femaleHidden').disabled = true; } if (document.getElementById("transgender").checked) { document.getElementById('transgenderHidden').disabled = true; } const form = document.getElementById('form'); const formData = new FormData(form); const output = document.getElementById('output'); output.style.color = "red"; for (const [key, value] of formData) { output.innerHTML += `${key}: ${value}` + '<br>'; } } </script> </body> </html>
In the above example, users can see that we can post the unchecked HTML checkboxes using the hidden as an input type in HTML.
In this tutorial, we h**e learned how to POST unchecked HTML checkboxes.
