Form dinamis menggunakan jQuery adalah sebuah pendekatan untuk membuat form yang dapat ditambahkan atau dihapus field input secara dinamis menggunakan library jQuery.
Form dinamis sangat berguna ketika Anda ingin mengizinkan pengguna untuk menginputkan data dalam jumlah yang bervariasi atau ketika Anda ingin memberikan pengguna kemampuan untuk menambah atau menghapus entri data sesuai kebutuhan mereka.
Dengan menggunakan jQuery, Anda dapat menangani manipulasi elemen HTML secara mudah dan efisien. Anda dapat menambahkan field input baru secara dinamis dengan mengklik tombol “Tambah” dan menghapus field input yang tidak diperlukan dengan mengklik tombol “Hapus”. Semua ini dapat dilakukan tanpa perlu me-refresh halaman web.
Dalam pengembangan form dinamis menggunakan jQuery, Anda akan menggunakan fungsi-fungsi seperti append() dan remove() untuk menambahkan dan menghapus elemen HTML, serta mengatur event handler untuk menangani interaksi pengguna.
Baca Juga: Apa Itu Plugin JQuery Dan Cara Menggunakannya
Dengan menggunakan kombinasi jQuery dan HTML, Anda dapat membuat form yang responsif dan mudah digunakan bagi pengguna.
Contoh Kode
<!DOCTYPE html>
<html>
<head>
<title>Form Dinamis</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="dynamic-form">
<div id="form-container">
<div class="form-group">
<label for="name">Nama:</label>
<input type="text" name="name[]" class="name">
<button type="button" class="remove">Hapus</button>
</div>
</div>
<button type="button" id="add">Tambah</button>
<button type="submit">Kirim</button>
</form>
<script>
$(document).ready(function() {
// Menambahkan field baru
$("#add").click(function() {
var html = '<div class="form-group">';
html += '<label for="name">Nama:</label>';
html += '<input type="text" name="name[]" class="name">';
html += '<button type="button" class="remove">Hapus</button>';
html += '</div>';
$("#form-container").append(html);
});
// Menghapus field
$(document).on("click", ".remove", function() {
$(this).parent().remove();
});
// Submit form
$("#dynamic-form").submit(function(event) {
event.preventDefault();
// Mendapatkan semua nilai field nama
var names = [];
$(".name").each(function() {
names.push($(this).val());
});
// Lakukan sesuatu dengan data yang dikumpulkan
console.log(names);
});
});
</script>
</body>
</html>
Dalam contoh di atas, kami menggunakan jQuery untuk menambahkan dan menghapus field input nama secara dinamis. Saat tombol “Tambah” ditekan, kita membuat elemen HTML baru dan menambahkannya ke dalam <div> dengan ID “form-container”. Saat tombol “Hapus” di tekan, kita menghapus elemen HTML yang sesuai.
Baca Juga: Membuat Animasi Dengan jQuery
Ketika formulir dikirim, kita menggunakan $(".name").each() untuk mendapatkan nilai dari semua input dengan class “name” dan menyimpannya dalam array “names”. Anda dapat mengganti bagian console.log(names); dengan kode yang sesuai untuk memproses data yang dikumpulkan dari formulir.
Demikian contoh sederhana untuk membuat form dinamis menggunakan jQuery. Anda dapat mengembangkannya sesuai kebutuhan Anda.
