Kumpulan Source Code, Tips dan Tutorial Pemograman Web

Hide dan Show Form Input Jika List Menu Dipilih

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.

Previous

Menampilkan Angka Genap dan Ganjil pada PHP

Next

Menampilkan Angka Format Rupiah Dengan PHP

14 Comments

  1. 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

    • 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

  2. Thanks Gan, Mantul Tutorialnya

  3. Rizki Lestari

    makasih banyak gann!!

  4. nana suna

    untuk banyak inputanya bagaimana gan, dan ada bberapa jenis kategori, bagaimana codingnya?

  5. kalau data listnya diambil dari database gmn gan? kok tak coba ndak bisa ya

  6. sucimsc

    Wah… Sangat membantu… Thank u gan..

  7. 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

  8. Thank’s Min, Berhasil saya ngubah label..

  9. jojo

    thanks

  10. masih pemula

    bg kalau posisinya di modal boostrap kok kaagk mau y bg?

Leave a Reply to ruri Cancel reply

Your email address will not be published.

Powered by WordPress & Theme by Anders Norén