資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究POST 未選中HTML複選框
在本教程中，我們將學習如何 POST 未選中的 HTML 複選框。
為了與使用者互動，需要透過網站獲取使用者的輸入或資料。HTML 表單用於獲取使用者的輸入。表單對於在網站上獲取使用者資料至關重要。這些表單獲取使用者的輸入，並使用 HTTP 請求將資料傳送到伺服器。
HTTP 請求有兩種型別，一種是 GET，另一種是 POST。POST 請求是最常用的型別，因為它安全且可以傳送大量資料。但是這兩種方法都發送其值已更改或編輯的資料。因此，未編輯的值或未選中的複選框不會發送到伺服器。
因此，讓我們看看如何從表單中 POST 未選中的 HTML 複選框。
使用隱藏輸入型別
隱藏輸入型別是一個輸入欄位，它既不會從使用者那裡獲取輸入，也不會顯示。此輸入欄位僅用於透過 HTTP 請求預設傳送此欄位的值。這是形成資料和資料庫的一個非常重要的欄位。
如果沒有 HTML 表單，我們就無法將資料傳送到伺服器。要將未從使用者那裡獲取的附加資料傳送到伺服器，我們必須在 HTML 中使用隱藏輸入型別。
使用者可以按照以下語法使用隱藏輸入型別來發布未選中的 HTML 複選框：
語法
<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>
按照上述語法使用隱藏輸入欄位。
示例 1
在下面的示例中，我們在表單中使用了複選框來獲取使用者的輸入。我們將看到在使用複選框釋出資料後會得到什麼。我們在表單中添加了七個複選框。單擊提交按鈕後，我們將收到表單中 POST 方法傳送的資料。
<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>
在上面的示例中，使用者可以看到我們只會獲得已選中複選框的值，並且只有這些值會發送到伺服器。
示例 2
在下面的示例中，我們使用了隱藏輸入型別來將資料傳送到伺服器，無論複選框是否選中。我們正在定義與表單中其他複選框同名的隱藏輸入型別。在指令碼中，我們給出了一個條件，如果選中複選框，則相應的隱藏欄位將被停用。這樣，我們就不會為同一個複選框獲得雙倍值。
<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>
在上面的示例中，使用者可以看到我們可以使用隱藏作為 HTML 中的輸入型別來發布未選中的 HTML 複選框。
在本教程中，我們學習瞭如何 POST 未選中的 HTML 複選框。
更新於：2022年12月7日
4K+ 次瀏覽
廣告