Membuat Form Modal Dinamis Dengan jQuery dan Bootstrap

Form Modal dapat ditampilkan dengan berbagai cara dengan menggunakan jQuery, Bootstrap dan lainnya. Dalam tutorial ini, kita akan menunjukkan modal Bootstrap dengan konten yang dimuat secara dinamis. Konten disimpan dalam tabel Database yang diambil dan dimuat secara dinamis ke dalam Body modal. Misalkan dalam contoh kali ini, 1 form modal bisa digunakan untuk form tambah data dan juga form edit data.

Sebelumnya, pastikan anda sudah menyertakan library yang diperlukan yaitu bootstrap dan jquery sendiri.

Sertakan juga form modal dengan body kosong, nantinya body akan diisi konten sesuai fungsi yang dipanggil, apakah mode add atau edit.

Untuk memanggil modal, buat fungsi javascript 

Fungsi di atas dipanggil melalui button atau perintah <a></a> pada HTML dengan event onclick misal:

Oke baiklah, jika masih bingung, mari kita lihat source code lengkapnya saja.


File db.php

File ini berisi konfigurasi database

File index.php

File ini berisi tampilan utama

File form.php

File ini berisi source untuk mengisi konten modal dalam mode add maupun edit.

File proses.php

File ini berisi proses simpan mode add maupun edit yang dipanggil oleh file form.php sebelumnya.

Sekian. semoga bermanfaat.

Posting Komentar

0 Komentar