KangJaz.com

Tempat Tips, Tutorial dan Source Code dari seorang newbie

Cara Membuat Form Dinamis Menggunakan JQuery

16 Desember 2018 | Kategori : JavaScript

Hai hai hai sobat semua, sebelumnya saya minta maaf nih karena pada minggu kemarin tidak update tutorial pada blog ini hehehe,,, Oke pada kesempatan kali ini, saya akan berbagi tutorial bagaimana cara membuat form input dinamis dengan bantuan JQuery.

jquery.png

Seperti yang kita ketahui, JQuery sendiri merupakan sebuah framework javascript yang telah dirancang untuk mempermudah kita dalam mendesain tampilan sebuah website. Dengan JQuery kita juga tidak perlu repot-repot untuk membedakan cara implementasi javascript pada setiap browser, karena JQuery akan mendeteksi browser apa yang digunakan dan kemudian menyiapkan fungsi pengganti dari fungsi yang tidak dapat berjalan pada browser tersebut.

Apa itu form dinamis

Oke sobat kita kembali ke topik pembahasan pada postingan kali ini, form dinamis merupakan sebuah form input yang bisa kita tambah maupun hapus sesuai dengan kebutuhan tanpa harus mengotak atik code yang dibuat. Nah untuk membuat form dinamis, kita memerlukan bantuan javascript untuk memanipulasi element html-nya.

Bagaimana cara membuat form dinamis ?

Oke sobat kita langsung saja ke tutorial pembuatan form dinamis nya, untuk itu silahkan sobat siapkan beberapa library di bawah ini :

  1. JQuery
  2. Bootstraps

Jika kedua library tersebut sudah siap, silahkan sobat masukkan ke dalam folder dengan struktur seperti pada gambar di bawah ini :

form-dinamis.png

Oh iya, silahkan sobat buat juga sebuah file index dengan extensi html karena kita kali ini hanya akan membuat script yang berhubungan dengan tampilan saja. Jika sudah, silahkan sobat ketikkan script di bawah ini pada file index yang tadi sobat buat :

Kemudian silahkan simpan dan jalankan.

Sedikit penjelasan, ketika button tambah form di klik maka fungsi add_form akan dijalankan, bisa sobat lihat pada fungsi add_form terdapat fungsi append() yang digunakan untuk menambah elemen pada sebuah element html. Fungsi inilah yang bertugas untuk menginsert form baru yang telah kita siapkan pada variabel html pada javascript. Kemudian ketika button hapus di klik maka akan menjalankan fungsi del_form, bisa sobat lihat pada fungsi ini terdapat fungsi closest() dimana fungsi ini akan mencari ancestor terdekat pada element yang dipilih, kemudian dihapus dengan fungsi remove().

Baik sobat saya rasa cukup ini yang bisa saya bagikan kali ini, semoga sedikit coretan ini bisa bermanfaat bagi sobat yang membutuhkan tutorial membuat form dinamis menggunakan jquery. Happy Coding