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. menampilkan form setelah radio button
  2. bagaimana cara menggunakan button agar otomatis muncul pilihan
  3. membuat pilihan yes no saat input data di php
  4. menampilkan inputan otomatis dari button
  5. mengunakan radiobutton pada form javascript
  6. otomatis butoon
  7. saat ketik 2 muncul 2 input php
  8. script data otomatis muncul di saat melakukan form pemesanan
  9. script php menampilkan data otomatis ketika di klik
  10. membuat inputan radio button dan text
  11. membuat fungsi radio javascript
  12. cara membuat form inputan tersembunyi sebelum di klik button
  13. cara mengambil data otomatis dari name pada input form php
  14. cara menggunakan radio button di javascript
  15. cara tampilkan data otomatis saat klil tombol php

Leave a Reply

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