Halo, mungkin sobat bingung membaca judul dari tulisan ini, karena saya juga bingung dalam merangkai kata-kata yang bagus dan gampang untuk dimengerti (haha :D). Sebelum semuanya makin bingung akan saya jelaskan maksud dan tujuan saya membuat tulisan ini. Jadi program kali ini berupa fitur yang memungkinkan show (tampilkan) atau hide (sembunyikan) sebuah form input jika salah satu kondisi/menu dipilih.
Contohnya kita akan membuat pilihan dengan value “Ada” dan “Tidak Ada“. Pada contoh ini adalah pilihan untuk KTP, jika value dipilih “Tidak Ada” maka tidak ada form isian untuk input nomor KTP-nya, dan jika value yang dipilih “Ada” maka muncul form isian untuk input nomor KTP.
Sudah cukup terbayang? atau makin bingung? 😀 Lihat contohnya pada gambar di bawah.
Form input text tidak muncul jika value yang dipilih “Tidak Ada”.
Form input text muncul jika value yang dipilih “Ada”.
Sudah jelas bukan??
Nah, untuk membuat fitur seperti itu kita butuh jquery sebagai fungsinya.
Script lengkapnya adalah :
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$("#ktp").change(function() {
console.log($("#ktp option:selected").val());
if ($("#ktp option:selected").val() == 'Tidak Ada') {
$('#no_ktp').prop('hidden', 'true');
} else {
$('#no_ktp').prop('hidden', false);
}
});
});
</script>
</head>
<body>
<label style="margin:20px;">
KTP : <br />
<select id="ktp" name="ktp" style="margin-left:20px;">
<option value="Tidak Ada">Tidak Ada</option>
<option value="Ada">Ada</option>
</select>
<input type="text" name="no_ktp" id="no_ktp" value="" hidden />
</label>
</body>
</html>
Semoga bermanfaat, silahkan disesuaikan dengan kebutuhan sobat, logikanya memang tidak rumit-rumit amat, tapi cukup untuk membuat tampilan program yang kita bikin lebih rapi.
Keep Calm And Stay Ngoding.
Newbie
Good coding min, kalo form input tersebut sudah berhasil dan data sudah diinput didatabase, kalo mau preview data, jika data A pada inputan ktp bervalue tidak ada, proses untuk hidden gmn min? Tolong pencerahannya
admin
Pakai logika if saja gan,
if value empty, set property hidden.
Abu Bakar
kalau seperti ini gimana gan,,ketika dipilih selain pondok pesantren maka form tidak akan muncul, tetapi ketika di pilih pondok pesantren form muncul.
$(window).load(function(){
$(“#pondok”).change(function() {
console.log($(“#pondok option:selected”).val());
if ($(“#pondok option:selected”).val() == ‘Tidak Ada’) {
$(‘#nm_pondok’).prop(‘hidden’, ‘true’);
} else {
$(‘#nm_pondok’).prop(‘hidden’, false);
}
});
});
Tempat tinggal Selama Sekolah:
Pilih Pondok:
Bersama Orang Tua
Kos
Asrama
Pondok Pesantren
Nama Pondok Pesantren :
PP Queen Al-Falah Putra
PP Queen Al-Falah Putri
PP Nurul Falah
PP DNE
yasmirahmedan
Thanks Gan, Mantul Tutorialnya
Rizki Lestari
makasih banyak gann!!
nana suna
untuk banyak inputanya bagaimana gan, dan ada bberapa jenis kategori, bagaimana codingnya?
ruri
kalau data listnya diambil dari database gmn gan? kok tak coba ndak bisa ya
satria
value nya berdasarkan id yang di database gan
sucimsc
Wah… Sangat membantu… Thank u gan..
Dinda
Terima kasih mas, sangat membantu. Mau tanya, tapi kenapa ya ketika kita pilih “Ada”, valuenya gamasuk ke database kak? yg masuk ke database hanya saat kita pilih “Tidak Ada”. Mohon bantuannya kak, terima kasih
stark
coba cek option value nya, cek juga query nya
Aliansera
Thank’s Min, Berhasil saya ngubah label..
jojo
thanks
masih pemula
bg kalau posisinya di modal boostrap kok kaagk mau y bg?