Cara Membuat Dynamic Form Sederhana Menggunakan jQuery

Hai, balik lagi ditutorial pemrograman Dumet School, teman teman pernah gak belajar tentang jQuery, jQuery dalam bahasa pemrograman bisa disebut dengan Framework dari JavaScript, dengan jQuery kita bisa membuat sebuah aplikasi program secara terperinci, secara real time atau no reload pada browser, atmpilan website lebih menarik lebih interaktif dan memiliki nilai jual lebih tinggi, tidak semua programmer menyukai jQuery, tapi tidak ada salahnya jika kita belajar dari tahap tahap dasar

pada jQuery, oke pada kasus ini saya akan menjelaskan tentang Bagaimana Cara Membuat Dynamic Form Sederhana Menggunakan jQuery. Jadi idenya disini kita akan membuat sebuah form generator yang akan terus bertambah setiap user mengklik tombol tambah/add pada browser, dan user pun bisa menghapusnya jika di inginkan, oke untuk mengurangi rasa penasaran kita bisa langsung saja praktekan yah teman teman bisa siapkan sebuah file baru dan beri nama file tersebut dengan nama bebas saya akan memberi nama pada file tersebut index.html. dan jika teman teman sudah membuatnya coba tambahkan scriptnya sebagai 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();
				});
			});

Jika sudah coba disave dan jalankan dibrowsernya, jika berhasil maka tampilannya akan seperti ini :

Dan jika klik tombol tambah/add maka secara otomatis form akan bertambah satu terus menurus sampai user tidak menekan tombol tambah/add oke cukup mudah bukan, sekian tutorial tentang Bagaimana Cara Membuat Dynamic Form Sederhana Menggunakan jQuery. Sampai bertemu diartikel selanjutnya dan sampai jumpa.

#KeepLearn

#IsmetMA

The post Cara Membuat Dynamic Form Sederhana Menggunakan jQuery appeared first on Kursus Website Terbaik.