Javascript – Input Form Otomatis Setelah Radio Button di Klik

By , July 20, 2016,

Javascript – Input Form Otomatis Setelah Radio Button di Klik. Sebuah pengaturan dan desain form input agar menjadi lebih simpel dan elegan Perlu sekali penggunaan javascript sebagai tambahan untuk membuat desain lebih atraktif, seperti misalnya pada form yang kita gunakan untuk mengiput sebuah data.

Pada kasus ini saya akan membuat sebuah form yang otomatis muncul ketika pilihan radio button di klik. Cara simpel hanya butuh beberapa baris kode saja, simak tutorialnya berikut ini,

Input Form Otomatis Setelah Radio Button di Klik

Berikut ini fungsi javascript yang akan kita gunakan untuk memunculkan form berikutnya pada sebuah web atau blog.


<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>

Menampilkan Form berikutnya


<form method="post" action="" >
 <p><input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck" checked><strong>Automatic</strong>
 <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"><strong>Custom</strong>
 </p>
 <p><labe><strong> Url:</strong></label><input type="text" name="url" size="45" />
 <span id="ifYes" style="display:none" ><strong> Custom:</strong><input type="text" name="custom" size="45" class="icustom"/><br/>
 <p><input type="submit" name="submit" id="Submit" value="Shorten" /></p>
 <div id="result"></div>
 </form>

Ouput

Sebelum di klik

sebelum klik Javascript - Input Form Otomatis Setelah Radio Button di Klik

sebelum klik Javascript – Input Form Otomatis Setelah Radio Button di Klik

Sesudah di klik

setelah klik Javascript - Input Form Otomatis Setelah Radio Button di Klik

setelah klik Javascript – Input Form Otomatis Setelah Radio Button di Klik

Demikian tutorial singkat javascript muncul otomatis semoga membantu.

Postingan berikutnya

  1. Tombol input radio onclick
  2. javascript radio inputan
  3. menggunakan radio button java scrip
  4. menampilkan waktu saat buttin diklik php
  5. menampilkan inputan otomatis dari radio button
  6. membuat tombol input gambar javascrip
  7. membuat inputan otomatis pada php
  8. koding otomatis on click php
  9. ketika button di klik data muncul di textfielt
  10. cara otomatis pilihan muncul pada php
  11. cara menampilkan radio button di javascript dengan button
  12. cara menampilkan input radio button javascript
  13. cara membuat radio button di php 2 fungsi

Leave a Reply

Your email address will not be published. Required fields are marked *