Senin, 14 Februari 2022

Mengambil Nilai dari Radio button dengan javascript

 Assalamualaikum Wr, Wb


Kali ini mau sedikit share tentang bagaimana cara nya menampilkan nilai dari radio button ke text area, terkadang kita menemui kasus seperti itu, bagaiman caranya yuk langsung saja kita prakter

Tampilan awal sebelum radio button di klik



Tampilan sesudah Radio button di klik



Buat file index.html kemudian salih kode di bawah ini:


<div id="disposisimodaltelaah" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg ">
      <div class="modal-content">
        <div class="modal-header modal-dark">
          <h5 class="modal-title" id="exampleModalLabel">Disposisi Aduan</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>

        <form class="form-horizontal" method="post" action="#" 	enctype="multipart/form-data">
          <div class="modal-body">
            <div class="form-group col-12 mt-10">
              <label for="fm-nama">Disposisi Ke:</label>
	            <select class="form-control" name="kondisiaduan">
		            <option value="DI_TIMINSPEKTUR">TIM INSPEKTUR</option>
		            <option value="DITOLAK">LAPORAN DITOLAK</option>
		        </select>
            </div>

	        <div class="form-group col-12 mt-10">
              <label for="fm-nama">Upload Berkas:</label>
		        <input type="file" class="form-control" name="file" >
            </div>
            
            <div class="form-group col-12 mt-10">
                <label for="fm-nama">Catatan:</label>
                <div class="custom-control custom-radio">
		        <input type="radio" id="ContohRadio1" name="catatan" class="custom-control-input" onclick="displayResult(this.value)" value="Kami Sertkan Dokumen Bukti Bukti Hasil Dari Tim Telaah">
		        <label class="custom-control-label" for="ContohRadio1">Kami Sertkan Dokumen Bukti Bukti Hasil Dari Tim Telaah</label>
	        </div>
            
	        <div class="custom-control custom-radio">
		        <input type="radio" id="ContohRadio2"  name="catatan" class="custom-control-input" onclick="displayResult(this.value)" value="Dukumen Kurang Lengkap">
		        <label class="custom-control-label" for="ContohRadio2">Dukumen Kurang Lengkap</label>
	        </div>

	        <div>
	           <textarea class="form-control" name="catatan" Placeholder="Catatan Catatan Bila Ada" id="pilihan"></textarea>
	        </div>
	    </div>
            
        </div>
        <div class="modal-footer">
            <button  type="submit" class="btn btn-sm" style="background-color: #00a396; color:#ffffff">Disposisi</button>
          </div>
        </form>
      </div>
    </div>
</div>

<script>
    function displayResult(catatan){ 
        document.getElementById("pilihan").value=catatan; 
    }
</script>


Jalankan file di browser kalian. ok nilai dari radio button sudah berhasil di tampilkan di textarea dengan bantuan javascript, gimna gampang kan? semoga bermanfaat 🙏🏻

Tidak ada komentar:
Tulis komentar

Kategori