Rumah > Artikel > hujung hadapan web > 'POST menyahtanda kotak pilihan HTML'
'POST menyahtanda kotak pilihan HTML'
- 王林ke hadapan
- 2023-09-01 19:29:06719semak imbas
Dalam tutorial ini, kita akan belajar untuk MENYIARKAN kotak semak HTML yang tidak ditandakan.
Untuk berinteraksi dengan pengguna, adalah perlu untuk mendapatkan input atau data mereka melalui laman web. Borang HTML digunakan untuk mendapatkan input pengguna. Borang adalah penting untuk menangkap data pengguna di tapak web anda. Borang ini mengambil input daripada pengguna dan menghantar data ke pelayan menggunakan permintaan HTTP.
Terdapat dua jenis permintaan HTTP, satu GET dan satu lagi POST. Permintaan POST ialah jenis yang paling biasa digunakan kerana ia selamat dan boleh menghantar sejumlah besar data. Tetapi kedua-dua kaedah menghantar data yang nilainya telah diubah atau diedit. Oleh itu, nilai yang tidak diedit atau kotak pilihan yang tidak ditandakan tidak dihantar ke pelayan.
Jadi, mari lihat cara MENYIARKAN kotak semak HTML yang tidak ditandai daripada borang.
Gunakan jenis input tersembunyi
Jenis input tersembunyi ialah medan input yang tidak menerima input daripada pengguna mahupun ia dipaparkan. Medan input ini digunakan secara lalai hanya untuk menghantar nilai medan melalui permintaan HTTP. Ini adalah bidang yang sangat penting dalam pembentukan data dan pangkalan data.
Tanpa borang HTML, kami tidak boleh menghantar data ke pelayan. Untuk menghantar data tambahan pada pelayan yang tidak diperoleh daripada pengguna, kita perlu menggunakan jenis input tersembunyi dalam HTML.
Pengguna boleh menyiarkan kotak semak HTML yang tidak ditanda menggunakan jenis input tersembunyi mengikut sintaks berikut -
Tatabahasa
<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>
Gunakan medan input tersembunyi seperti dalam sintaks di atas.
Contoh 1
Dalam contoh di bawah, kami menggunakan kotak pilihan dalam bentuk untuk mendapatkan input daripada pengguna. Kami akan melihat apa yang kami dapat selepas menyiarkan data menggunakan kotak pilihan. Kami menambah tujuh kotak pilihan pada borang. Selepas mengklik butang hantar, kami akan mendapat data yang dihantar melalui kaedah pos dari borang.
<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>
Dalam contoh di atas, pengguna dapat melihat bahawa kami hanya akan mendapat nilai kotak pilihan yang ditandakan dan hanya nilai ini akan dihantar ke pelayan.
Contoh 2
Dalam contoh di bawah, kami menggunakan jenis input tersembunyi untuk menghantar data ke pelayan tanpa mengira sama ada kotak pilihan ditandakan atau tidak. Kami mentakrifkan jenis input tersembunyi dengan nama yang sama seperti kotak semak lain dalam borang. Dalam skrip kami telah memberikan syarat bahawa jika kotak semak ditandakan maka medan tersembunyi yang dihormati akan dilumpuhkan. Dengan cara ini kita tidak akan mendapat nilai berganda untuk kotak pilihan yang sama.
<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>
Dalam contoh di atas, pengguna dapat melihat bahawa kami boleh menyiarkan kotak semak HTML yang tidak ditandai menggunakan tersembunyi sebagai jenis input dalam HTML.
Dalam tutorial ini, kami belajar cara MENYIARKAN kotak semak HTML yang tidak ditandai.
Atas ialah kandungan terperinci 'POST menyahtanda kotak pilihan HTML'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!