Membuat form yang dinamis

Membuat form yang dinamis

2417
19
SHARE

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.

Bagikan artikel ini ya.. terima kasih

19 COMMENTS

    • pertanyaan bagus :D.. terus terang panjang bila dijelaskan detail penggunaanya. nanti kalo ada waktu saya coba berikan contoh penggunaan real nya. terima kasih.

  1. Tanya Gan, kalau update, dinamisnya gimana ya? untuk insert saya sudah bisa namun untuk menampilkan semua data yang mau di update saya, masih kesulitan. terima kasih atas bantuannya

    • harusnya kalo udah bisa tambah, editnya jg bisa gan :hammer: hahaha.. pada prinsipnya sama, cuma maen di array aja. kalo tambah kan data awalnya kosong, nah kalo edit udah ada datanya. gitu aja. nanti kalo sempet saya buatkan tutor lengkapnya.

  2. artikel yang bagus,
    mau nanya gan, misal form yang ingin ditambahkan berupa dropdown bagaimana ya?
    terus kan kalo generate pake crud generator kan dia bukan pake table ya? tapi cuma div, itu bagaimana ya?

LEAVE A REPLY