Radio Button Hide/Unhide Form

Radio Button Hide/Unhide Form

Radio Button Hide/Unhide Form di bawahnya. Ini merupakan fitur yang ada pada web yang berfungsi untuk menanmpilkan dan menyembunyakan form menggunakan pilihan radio button html.

Fitur ini mengkombinasikan antara html dan juga javascript.

Beberapa fungsi sejenis yang dapat Kamu gunakan menggunakan cara ini misalnya:

1. Menampilkan dan menyembunyikan combobox menggunakan pilihan radio button
2. Untuk menampilkan informasi text
3. Untuk menampilkan form atau informasi lanjutan

Script Html & Javascript

Html

 <table>
            <tr><td> <input type="radio" name="toggle" value="hide" onclick="jenisAnggota(false)" checked> <b>Anggota </b>
             <input type="radio" name="toggle" value="show" onclick="jenisAnggota(true)"> <b> Non Anggota</b>
            </td></tr>
            
           
            <tr>
                <td align="center">
                    <div id="tampil" style="display: block;">
                    <b>No Anggota</b><br/>
                    <input   type="text" name="no" class="form-control input">
                    </div>
                    
                     <div id="tampil2" style="display: none;">
                    <b>Nama</b><br/>
                    <input   type="text" name="nama" class="form-control input"><br/>
                     <b>Telp</b><br/>
                    <input   type="number" name="telp" class="form-control input"><br/>
                    <b>Pekerjaan</b><br/>
                    <input   type="text" name="pekerjaan" class="form-control input"><br/>
                    <b>Asal Instansi</b><br/>
                    <input   type="text" name="instansi" class="form-control input">
                    </div>
                
                </td>
            </tr>
</table>

Javascript

  <script>
     function jenisAnggota(show) { 
      const form = document.getElementById('tampil');
      const form2 = document.getElementById('tampil2');
      form.style.display = show ? 'none' : 'block';
      form2.style.display = show ? 'block' : 'none';
    }
</script>

Demikian semoga bermanfaat buat teman teman semua.