Contoh kasus kali ini adalah form seperti pada gambar akan di update agar ada input untuk mengisi tanggal. Form ini diperlukan ketika klien ingin menggunakannya sebagai perintah untuk mengerjakan proyek dengan tenggat waktu. Tapi karena terletak di semua halaman web, maka form ini juga akan digunakan bagi calon klien untuk bertanya yang tidak membutuhkan input tanggal.
Jadi yang akan kita lakukan adalah membuat program javascript dimana ada 3 pilihan yaitu :
(1) Tanya, (2) Proyek (3) Revisi berupa check box. Tapi jika yang dipilih salah satunya adalah pilihan ke(2) atau ke(3), maka akan keluar input untuk mengisi tanggal.
Berikut ini contoh kode menggunakan program JavaScript dengan HTML dan CSS :
<!DOCTYPE html><html><head><title>Pilihan</title><style>#tanggalField {display: none;}</style></head><body><h1>Pilihan:</h1><form><label for="tanyaCheckbox"><input type="checkbox" id="tanyaCheckbox" name="pilihan" value="tanya"> Tanya</label><br><label for="proyekCheckbox"><input type="checkbox" id="proyekCheckbox" name="pilihan" value="proyek"> Proyek</label><br><label for="revisiCheckbox"><input type="checkbox" id="revisiCheckbox" name="pilihan" value="revisi"> Revisi</label><br><div id="tanggalField"><label for="tanggal">Tanggal:</label><input type="date" id="tanggal" name="tanggal"></div></form><script>const proyekCheckbox = document.getElementById("proyekCheckbox");const revisiCheckbox = document.getElementById("revisiCheckbox");const tanggalField = document.getElementById("tanggalField");proyekCheckbox.addEventListener("change", toggleTanggalField);revisiCheckbox.addEventListener("change", toggleTanggalField);function toggleTanggalField() {if (proyekCheckbox.checked || revisiCheckbox.checked) {tanggalField.style.display = "block";} else {tanggalField.style.display = "none";}}</script></body></html> {codeBox}
Kode di atas membuat tiga pilihan dalam bentuk checkbox. Jika checkbox "Proyek" atau "Revisi" dicentang, maka kolom untuk memasukkan tanggal akan muncul. Jika keduanya tidak dicentang, kolom tanggal akan disembunyikan kembali. Silakan menyalin dan tempel kode ini di file HTML kamu dan bukalah di browser untuk melihat hasilnya.
Sekarang coba latihan dengan kondisi ini :
LATIHAN: Buat 3 pilihan checkbox: (1) Bagus, (2) Murah, (3) Cepat. Dari ketiganya hanya boleh memilih 2 checkbox saja, sehingga checkbox yang lebih awal akan otomatis terhapus. Jika yang dipilih (1) dan (2), maka muncul tulisan "Tidak Mungkin Cepat". Jika yang dipilih (2) dan (3) maka muncul tulisan "Tidak Mungkin Bagus", Jika yang dipilih (1) dan (3) maka muncul tulisan "Tidak Mungkin Murah". {alertWarning}
Berikut kunci jawabannya :
<!DOCTYPE html><html><head><title>Pilihan</title><style>#hasil {display: none;}</style></head><body><h1>Pilihan:</h1><form><label for="bagusCheckbox"><input type="checkbox" id="bagusCheckbox" name="pilihan" value="bagus"> Bagus</label><br><label for="murahCheckbox"><input type="checkbox" id="murahCheckbox" name="pilihan" value="murah"> Murah</label><br><label for="cepatCheckbox"><input type="checkbox" id="cepatCheckbox" name="pilihan" value="cepat"> Cepat</label><br><div id="hasil"><p id="hasilText"></p></div></form><script>const bagusCheckbox = document.getElementById("bagusCheckbox");const murahCheckbox = document.getElementById("murahCheckbox");const cepatCheckbox = document.getElementById("cepatCheckbox");const hasilDiv = document.getElementById("hasil");const hasilText = document.getElementById("hasilText");bagusCheckbox.addEventListener("change", checkConstraints);murahCheckbox.addEventListener("change", checkConstraints);cepatCheckbox.addEventListener("change", checkConstraints);function checkConstraints() {const selectedCheckboxes = [bagusCheckbox, murahCheckbox, cepatCheckbox].filter(checkbox => checkbox.checked);if (selectedCheckboxes.length > 2) {const uncheckedCheckbox = selectedCheckboxes.find(checkbox => !checkbox.checked);uncheckedCheckbox.checked = false;}if (bagusCheckbox.checked && murahCheckbox.checked) {hasilText.textContent = "Tidak Mungkin Cepat";} else if (murahCheckbox.checked && cepatCheckbox.checked) {hasilText.textContent = "Tidak Mungkin Bagus";} else if (bagusCheckbox.checked && cepatCheckbox.checked) {hasilText.textContent = "Tidak Mungkin Murah";} else {hasilText.textContent = "";}hasilDiv.style.display = hasilText.textContent ? "block" : "none";}</script></body></html> {codeBox}
Kode di atas memungkinkan Anda memilih dua dari tiga pilihan ("Bagus", "Murah", dan "Cepat"). Jika Anda mencoba memilih lebih dari dua, maka yang lebih awal akan otomatis tidak terpilih. Selain itu, pesan yang sesuai akan muncul sesuai dengan aturan yang Anda sebutkan. Anda dapat menyalin dan menempelkan kode ini ke dalam file HTML dan membukanya di browser untuk melihatnya dalam tindakan.
Berikut ini contoh lain :
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Portofolio Saya</title><style>/* Tambahkan CSS sesuai kebutuhan Anda *//* Gunakan CSS untuk menyembunyikan kolom tanggal awalnya */#tanggalInput {display: none;}</style></head><body><h1>Selamat datang di Portofolio Saya</h1><p>Saya adalah seorang desainer yang ahli dalam fotografi dan melayani jasa cetakan.</p><h2>Pilihan Tindakan</h2><form id="actionForm"><label><input type="checkbox" name="tanya" value="Tanya"> Tanya</label><br><label><input type="checkbox" name="proyek" value="Proyek"> Proyek</label><br><label><input type="checkbox" name="revisi" value="Revisi"> Revisi</label><br><div id="tanggalInput"><label for="tanggal">Tanggal:</label><input type="date" id="tanggal" name="tanggal"></div><br><input type="submit" value="Submit"></form><script>const actionForm = document.getElementById("actionForm");const tanggalInput = document.getElementById("tanggalInput");actionForm.addEventListener("change", function() {const proyekCheckbox = document.querySelector('input[name="proyek"]');const revisiCheckbox = document.querySelector('input[name="revisi"]');const tanggal = document.getElementById("tanggal");if (proyekCheckbox.checked || revisiCheckbox.checked) {tanggalInput.style.display = "block";tanggal.required = true;} else {tanggalInput.style.display = "none";tanggal.required = false;}});</script></body></html> {codeBox}
Kode di atas menciptakan halaman web sederhana dengan tiga pilihan tindakan (Tanya, Proyek, Revisi) yang dapat diubah dengan mencentang kotak-kotak. Jika Proyek atau Revisi dicentang, kolom input tanggal akan muncul dan menjadi wajib diisi. Jika keduanya tidak dicentang, kolom tanggal akan disembunyikan. Anda dapat menyesuaikan desain dan tampilan halaman web sesuai keinginan Anda dengan menambahkan CSS tambahan.