Halo kawan.. kali ini kita akan membahas tentang bagaimana membuat form yang dinamis. Maksudnya jumlah element form bisa kita tambah dan kita kurangi dengan mudah. Screen shotnya seperti di atas, atau anda bisa melihat demo nya di sini.

Form dinamis sangat berguna misalnya anda membuat data yang memiliki item item yang lebih detail. Langkah yang kita lakukan sama seperti membuat form pada umumnya. Yang membedakan hanyalah kita tambahkan javascript untuk menambah element input secara dinamis.

Kita menggunakan perintah createElement dan appendChild untuk membuat dan menambahkan element input baru dan tentu saja removeChild untuk menghapus element input yang tidak kita inginkan.

Proses yang dilakukan kode javascipt tersebut adalah memodifikasi DOM html, dan proses ini hanya berjalan di client, sehingga jika anda melakukan refresh halaman, makan form akan ter reset kembali ke awal.

Berikut ini adalah contoh sederhana kode form dinamis (anda bisa mendownload nya lengkap dengan CSS di sini)

Pada contoh diatas, kita mengirimkan data form dengan melakukan submit data dan refresh halaman. Untuk pengembangan lebih lanjut anda bisa menggunakan ajax untuk mengirimkan data form, sehingga tidak ada proses refresh.

Pada kesempatan ini kita hanya fokus ke bagaimana menambahan element dengan memodifikasi DOM menggunakan javascript. Semoga bermanfaat. Jangan lupa di share ya. Terima kasih.

UPDATE 27 Mei 2015

Untuk contoh insert ke database anda bisa mendownload contohnya di sini. Pada contoh ini terdapat tabel kelas dan anggota. Pengguna bisa memasukkan nama kelas sekaligus menginput anggota kelas tersebut dengan menggunakan form dinamis. Contoh ini sangat sederhana, silahkan dikreasikan lebih lanjut. Terima kasih.