Tutorial kali ini kita akan mengulas bagaimana cara menampilkan dan menyembunykan form pada sebuah halaman web html dengan combobox.
Kalau sebelumnya saya membuat ini dengan cara memanfaatkan penggantian url dengan menyembunyikan dan menampilkan form, maka sekarang tanpa merubah url. Kelemahan dengan merubah url pada parameternya adalah page akan terefresh dan isian form sebelumnya akan hilang atau akan kembali kosong seperti sebelumnya.
Dengan memanfaatkan cara simpel menggunakan javascript ini, halaman tidak akan terefresh dan isian inputan yang telah kita inputkan pada form sebelumnya tidak akan hilang atau tidak akan terpengaruh.
Pada kasus yang terapkan disini, saya telah membuat jenis formnya pada kasusnya. Pertama saya menggunakan script ini ketika akan membuat form inputan data pegawai. Pada data pegawai tersebut form sangat banyak mulai dari detail pribadi sampai detail info kepegawaian. Pada intinya ketika saya ingin memilih jabatan, maka akan muncul form di bawahnya.
Contohnya jika Saya memilih jabatan kepala bidang maka di bawahnya akan muncul pilihan bidang. Jika saya memilih jabatan kepala subbidang maka akan muncul pilihan form di bawahnya pilihan subbidang. Lain halnya jika Saya memilih jabatan sebagai kepala dinas, maka pilihan di bawahnya tidak akan muncul apa-apa, Secara logika tutorial kali ini hampir sama cara kerjanya.
Studi kasus
Kasus yang kita terapkan pada tutorial kali ini adalah pada form cetak laporan. Pada form laporan terdapat inputan pertama yang berupa combobox. Yang mana combobox tersebut terdapat 3 pilihan didalamnya.
Pilihan yang ada yaitu supplier, permintaan dan pengiriman.
Jika saya memilih combobox supplier maka tidak akan tampil form lagi dibawahnya. Namun jika Saya memilih pilihan permintaan atau pengiriman maka di bawah form tersebut akan muncul form berikutnya yaitu form inputan tanggal dari tanggal sampai tanggal berapa.
Oke langsung simpak tutorial simpel dan mudahnya ini,
Tampilan Form awal
Menyembunyikan form inputan html
Diatas merupakan tampilan default form cetak laporan pada aplikasi yang Saya buat. Untuk supplier jika di cetak akan menampilkan data supplier yang ada pada database aplikasi.
Pada Form pilih laporan tersebut terdapat 3 laporan seperti yang sudah Saya jelaskan di atas sebelumnya.
Pada form diatas, sebenarnya terdapat form lagi di bawah form tersebut yaitu dari tanggal dan sampai tanggal. Karena memang form pilihan diatas tidak membutuhkan rentan tanggal maka formnya Saya sembunyikan.
Tampilan setelah Form awal
Menampilkan form inputan html
Nah, pada tampilan diatas sudah tampil form setelah form pilihan laporan di pilih. Untuk membuat konsep diatas kita menggunakan javascript yang didalam scriptnya terdapat kondisi untuk menampilkan form yang kita maksud itu.
Javascript menyembunyikan dan menampilkan form
Sebegai contoh agar mudah dipahami, langsung saya ambil script dari kasus Saya ini,
<label>Pilih Laporan</label>
<select name=”laporan” class=”form-control” onchange=” if (this.selectedIndex==1 || this.selectedIndex==2){ document.getElementById(‘tampil_tanggal’).style.display = ‘inline’ }else { document.getElementById(‘tampil_tanggal’).style.display = ‘none’ };”>
<option value=”supplier”>Supplier</option>
<option value=”permintaan”>Permintaan</option>
<option value=”pengiriman”>Pengiriman</option>
</select>
<span id=”tampil_tanggal” style=”display:none;”>
<label>Dari Tanggal</label>
<input type=”date” value=”<?php echo date(‘Y-m-d’);?>” name=”dari” class=”form-control”> <label>Sampai Tanggal</label>
<input type=”date” value=”<?php echo date(‘Y-m-d’);?>” name=”sampai” class=”form-control”>
</span>
Penjelasan:
onchange=” if (this.selectedIndex==1 || this.selectedIndex==2){ document.getElementById(‘tampil_tanggal’).style.display = ‘inline’ }else { document.getElementById(‘tampil_tanggal’).style.display = ‘none’ };”
Merupakan javascript berfungsi untuk menampilkan dan menyembunyikan form. Pada script tersebut terdapat kondisi jika maka yang di tunjukkan dengan fungsi if. Kemudian terdapat this.selectedIndex==1 dan this.selectedIndex==2 merupakan kondisi jika di pilih pilihan 1 atau 2 maka akan tampilkan form berikutnya.
Ingat, dalam konsep pemgrograman pilihan tersebut perhitungannya di mulai dari 0, maka 0,1,2 dan seterusnya.
<option value=”supplier”>Supplier</option>
<option value=”permintaan”>Permintaan</option>
<option value=”pengiriman”>Pengiriman</option>
Diatas merupakan pilihan dari combobox yang kita maksud dari tadi. Untuk perhitungan urutannya di mulai dari 0.
<span id=”tampil_tanggal” style=”display:none;”>
Script diatas merupakan script html yang secara default menyembunyikan form. Jika fungsi javascript di pilih maka baru akan melakukan perubahan.
Demikian tutorial singkat mudah dan semoga membantu dalam membuat program berbasis web yang sedang Kamu kerjakan.