Home > Article > Web Front-end > 'POST unchecked HTML checkbox'
'POST unchecked HTML checkbox'
- 王林forward
- 2023-09-01 19:29:06718browse
In this tutorial, we will learn to POST an unchecked HTML checkbox.
To interact with users, it is necessary to obtain their input or data through the website. HTML forms are used to obtain user input. Forms are essential for capturing user data on your website. These forms take input from the user and send the data to the server using HTTP requests.
There are two types of HTTP requests, one is GET and the other is POST. POST request is the most commonly used type because it is secure and can send large amounts of data. But both methods send data whose values have been changed or edited. Therefore, unedited values or unchecked checkboxes are not sent to the server.
So, let’s see how to POST an unchecked HTML checkbox from a form.
Use hidden input types
A hidden input type is an input field that neither accepts user input nor displays it. This input field is used by default only to send the field's value via an HTTP request. This is a very important area in the formation of data and databases.
Without the HTML form, we cannot send data to the server. To send additional data on the server that is not obtained from the user, we have to use hidden input types in HTML.
Users can post unchecked HTML checkboxes using the hidden input type following the following syntax -
grammar
<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>
Use hidden input fields according to the above syntax.
Example 1
In the example below, we use checkboxes in a form to get input from the user. We will see what we get after posting data using checkboxes. We added seven checkboxes to the form. After clicking the submit button, we will get the data sent by 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, the user can see that we will only get the value of the checked checkbox, and only these values will be sent to the server.
Example 2
In the example below, we use a hidden input type to send data to the server regardless of whether the checkbox is checked or not. We are defining a hidden input type with the same name as other checkboxes in the form. In the script we have given a condition that if the checkbox is checked then the respected hidden fields will be disabled. This way we won't get a 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, the user can see that we can post an unchecked HTML checkbox using hidden as the input type in HTML.
In this tutorial, we learned how to POST an unchecked HTML checkbox.
The above is the detailed content of 'POST unchecked HTML checkbox'. For more information, please follow other related articles on the PHP Chinese website!