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. cara membuaf radio button di java script
  2. cara membuat radio button ketika di klik muncul text field
  3. membuat radiobutton dengan javascript
  4. menampilkan form setelah klik submit
  5. menampilkan radio button javascript
  6. radio button jika di klik

Leave a Reply

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