Cara Membuat Dynamic Form Sederhana Menggunakan jQuery

Halo, balik lagi ditutorial pemrograman Source Code Aplikasi, teman teman pernah gak belajar mengenai jQuery, jQuery pada bahasa pemrograman dapat disebut dengan Framework dari JavaScript, dengan jQuery kita dapat merancang sebuah program program secara terperinci, secara real time atau no reload di browser, atmpilan situs lebih menarik lebih interaktif dan mempunyai nilai jual lebih tinggi, tak segala programmer menyukai jQuery, tapi tak ada salahnya jikalau kita belajar dari tahap tahap basic

di jQuery, oke di kasus ini saya akan menjelaskan mengenai Bagaimana Cara Membuat Dynamic Form Sederhana Menggunakan jQuery. Jadi idenya disini kita akan merancang sebuah form generator yang akan terus bertambah setiap user mengklik tombol tambah/add di browser, dan user pun dapat menghapusnya jikalau di inginkan, oke bagi mengurangi rasa penasaran kita dapat seketika saja praktekan yah teman teman dapat siapkan sebuah file baru dan beri nama file tersebut dengan nama bebas saya akan memberi nama di file tersebut index.html. dan jikalau teman teman telah membuatnya coba tambahkan scriptnya selaku berikut :

<div class=container>
<div class=row>
<div class=col-md-12>
<div class=form-group>
<div class=table-responsive>
<table class=table id=dynamic>
<tr>
<td><input type=text placeholder=Masukkan Nama class=form-control /></td>
<td><button type=button id=tambah class=btn btn-success>Add</button></td>
</tr>
</table>
<input type=button id=submit class=btn btn-info value=KIRIM />
</div>
</div>
</div>
</div>
</div>
<script src=http://code.jquery.com/jquery-latest.min.js></script>

$(document).ready(function(){

var no =1;
$('#tambah').click(function(){
no++;
$('#dynamic').append('<tr id=row'+no+'><td><input type=text name=name[] placeholder=Masukkan Nama class=form-control /></td><td><button type=button id='+no+' class=btn btn-danger btn_remove>Hapus</button></td></tr>');
});

$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr(id); 
$('#row'+button_id+'').remove();
});
});

Jikalau telah coba disave dan jalankan dibrowsernya, jikalau berhasil karenanya tampilannya akan seperti ini :

Dan jikalau klik tombol tambah/add karenanya secara otomatis form akan bertambah satu terus menurus hingga user tak menekan tombol tambah/add oke lumayan gampang bukan, demikianlah panduan mengenai Bagaimana Cara Membuat Dynamic Form Sederhana Menggunakan jQuery. Hingga bertemu diartikel berikutnya dan hingga jumpa.

#KeepLearn

#IsmetMA

Sumber https://kursuswebsite.org