Hai teman-teman semuanya, kita lanjut belajar lagi untuk materi jquerynya, pada pembahasan kali ini kita akan mencoba membuat satu studi kasus yaitu membuat form dinamis dengan menggunakan jquery.

Yup kali ini kita akan membuat sebuah form yang dimana form tersebut bisa kita tambahkan dan bisa kita hapus inputannya jadi bisa dibilang unlimited form, untuk lebih jelasnya kita langsung saja praktekan.

Pertama silahakan teman-teman buat sebuah file dan ketikan script seperti berikut ini:

Saya membuat sebuah form yang dimana didalamnya terdapat sebuah text area dengan id name dan class name dan juga saya membuat button dengan id add, jika sudah dan teamn-teman save maka hasilnya akan seperti berikjut ini:

membuat form dinamis dengan menggunakan jquery1

hasilnya masih seperti form biasa dan jika kita klik tombol tambah masih belum terjadi apa-apa, sekarang kita masuk pada bagian scripting jquerynya, teman-teman silahakan tambahkan script berikut ini:

Scritp diatas untuk meload liblary dari jquery, sekarang teman-teman tambahkan script berikut ini untuk membuat tombolnya ketika kita klik maka akan memunculkan inputan baru:

Jika sudah teman-teman save lalu reload halaman browsernya, jika teman-teman klik tombol tambah maka hasilnya akan seperti berikut ini:

membuat form dinamis dengan menggunakan jquery2

saya mengklik tombol tambah sebanyak 2 kali maka akan bertambah inputan sebanyak 2, dan jika saya klik tombol hapusnya maka satu inputan akan terhapus.

Gimana teman-teman cukup mudah bukan? untuk tutorial kali ini tentang membuat form dinamis dengan menggunakan jquery saya rasa cukup sampai sini dulu, semoga bermanfaat,

Terima kasih.