Pada kesempatan kali ini saya akan membuat sebuah text input yang akan disembunyikan dan dimunculkan kembali ketika kita memilih pilihan pada radio button. Kita mulai saja.
1. Kita akan buat tampilan formnya terlebih dahulu. Tag HTMLnya seperti ini.
<form action=”” method=”post”>
<table border=”0″>
<tr>
<td><label>Apakah Anda Sudah Makan ?</label></td>
<td>:</td>
<td>Sudah <input type=”radio” onclick=”javascript:yesnoCheck();” name=”yesno” id=”yesCheck”> Belum <input type=”radio” onclick=”javascript:yesnoCheck();” name=”yesno” id=”noCheck”></td>
<tr>
<td></td>
<td></td>
<td id=”ifYes” style=”display:none”>
Jika Iya, Makan Apa Tadi ? <input type=’text’ id=’yes’ name=’yes’><br>
Mengapa Makan itu ? <input type=’text’ id=’acc’ name=’acc’>
</td>
</tr>
<tr>
<td>other 3</td>
<td>:</td>
<td><input type=’text’ id=’other3′ name=’other3′></td>
</tr>
<tr>
<td>other 4</td>
<td>:</td>
<td><input type=’text’ id=’other4′ name=’other4′></td>
</tr>
<tr>
<td><input type=’submit’ id=’other4′ name=’other5′ value=’Simpan’></td>
</tr>
</table>
</form>
Penjelasan :
Pada baris berikut
<td id=”ifYes” style=”display:none”>
Jika Iya, Makan Apa Tadi ? <input type=’text’ id=’yes’ name=’yes’><br>
Mengapa Makan itu ? <input type=’text’ id=’acc’ name=’acc’>
</td>
Kita akan sembunyikan dan akan muncul ketika kita pilih pilihan sudah pada radio button.
2. Lalu kita proses dengan menggunakan javascript untuk memunculkan dan menyembunyikan form. Kita bisa letakkan diatas tag form
<script type=”text/javascript”>
function yesnoCheck() {
if (document.getElementById(‘yesCheck’).checked) {
document.getElementById(‘ifYes’).style.display = ‘block’;
}
else document.getElementById(‘ifYes’).style.display = ‘none’;
}
</script>
3. Sekarang kita save dengan format .html dan buka pada browser. Coba teman-teman pilih Sudah, maka akan muncul form tambahan dibawah radio button tersebut dan akan hilang jika kita memilih belum.
