MENAMPILKAN DAN MENYEMBUNYIKAN FORM INPUT DENGAN DROPDOWN TANPA KLIK SUBMIT

source logo : www.freebiesupply.com


ASSALAMUALAIKUM Warohmatullohi Wabarokatuh
WA ALAIKUM SALAM Warohmatullohi Wabarokatuh

Pada tutorial kali ini akan berbagi bagaimana cara menampilkan dan menyembunyikan form input.

Jadi kasus nya, saat santri atau anggota telah tidak aktif, maka admin 'pengelola aplikasi' harus mengubah statusnya menjadi tidak aktif lalu menambah kan alasana mengapa santri tidak aktif.

1. Buka Text Editor Favorit kamu.

2. Ketik Script Dibawah ini

/* ---Example code----*/ 

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<br> 

pilih status 
<select class='status_santri'>
  <option value="1">Aktif</option>
  <option value="0">Tidak Aktif</option>
</select>
<br>
<br>
<div class='keterangan'>
  <textarea placeholder="alasannya"></textarea>
</div>
<script>

  $(document).ready(function() {
      
    $(function() {

      $('.keterangan').hide();

      $('.status_santri').change(function() {

        if ($("option[value='0']").is(":checked")) {

          $('.keterangan').show();

        } else {

          $('.keterangan').hide();

        }

      });

    });
    
  });
  
</script>
/* ---Example code----*/

3. Setelah ketik script diatas, tekan CTRL dan S pada keyboard untuk menyimpan.
4. Jalankan di browser.

5. Hasilnya akan seperti gambar dibawah ini jika berhasil.

Terima Kasih
Thank's

TAG TAGS :

how to add hide with function change in jquery | how to add hide when select option in jquery | how to add attribute with dropdown jquery | how to add atribut with select option jquery | cara menampilkan dan menyembunyikan inputan dengan dropdown | cara parsing value tanpa submit | cara oper nilai tanpa submit dengan dropdown |

BACA JUGA :

• CARA UPDATE DATA DENGAN DROPDOWN

SOURCE :

- https://stackoverflow.com/questions/18572401/jquery-select-change-show-hide-div-event
- http://jsfiddle.net/Y3pW9/
- http://jsfiddle.net/3w5kD/
- https://codepen.io/atelierbram/pen/gusxF
- http://jsfiddle.net/tYvQ8/