Source Code dan Tutorial Pemograman

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 :

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

6 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?

Leave a Reply to admin Cancel reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén