Mengisi form otomatis dengan ajax

Pengisian form secara otomatis sering diminati oleh pengguna website. Di artikel sebelumnya yaitu mengisi form otomatis udah ane bahas bagaimana cara membuatnya, nah artikel kali ini akan membahas bagaimana cara membuat form otomatis tersebut menggunakan ajax agar dapat mengambil data dari PHP. Pada dasarnya cara membuat form autofill hampir sama dengan artikel sebelumnya, hanya saja cara mengambil datanya menggunakan response ajax dari PHP.

Yuk mari kita mulai aja koding nya. Pertama buatlah sebuah file php atau html, dalam hal ini ane membuat file bernama autofill_ajax.php.

Pada script / code diatas, dimulai dengan membuat sebuah form dengan id “form”. Yang berisi combobox “name”, text field “email” dan “phone”. Nantinya text field “email” dan “phone” akan terisi otomatis setelah memilih combobox “name” dan menekan tombol submit. Kita lanjut ke bagian javascript nya. Seperti biasa, jika kita menggunakan jQuery yang pertama kali dilakukan adalah load jQuery nya dengan  $(document).ready();. Dalam event ready tersebut kita mulai dengan script untuk mengambil tombol submit yang mempunyai id “btnSubmit”.

Setelah mendapatkan tombol “btnSubmit”, kita tambahkan event click supaya jika tombol tersebut di-click akan menjalankan perintah – perintah yang kita inginkan, dalam hal ini adalah melakukan perintah ajax untuk mengesekusi file getdata.php dengan method post dan mengirim parameter “name” yang berisi value dari combo box “name”. Berhubung response yang diharapkan adalah json, maka kita setting dengan type json, supaya response json yang nanti didapatkan langsung diolah menjadi object oleh jQuery. Jadi kita ga perlu repot – repot untuk mengubah / parse response json-nya menjadi object. Kemudian penggunaan script autofill pada code diatas sama seperti pada artikel mengisi form otomatis, saran ane coba dibaca dulu artikel tersebut.

Selanjutnya mari kita buat file PHP nya, dalam hal ini ane membuat file bernama getdata.php.

$data merupakan data dalam bentuk object yang diambil dari file data.json yang isinya string berbentuk json, bisa juga di modifikasi dengan cara mengambil data dari database, hasilnya boleh berupa array ataupun object. Kalau misalnya mengambil data dari database, kita ga perlu melakukan looping menggunakan foreach seperti pada code yang ane tulis diatas, karena data yang muncul merupakan hasil query. Langkah selanjutnya adalah mengubah $data menjadi json. Berikut ini file data.json nya

Selesai deh, jangan lupa untuk comment jika ada pertanyaan atau saran atau sekedar meramaikan. Ditunggu comment nya yah ^_^.

6 comments

  • Ka apakah jika mengambil data dari database tidak memerlukan query sql?

  • minta contoh yang buat ngambil data di database dong please

  • malam

    terima kasih banyak, postingannya sangat membantu 🙂

    saya bole bertanya y, kalo dalam satu form ada beberapa select gimana y mas
    misal ada 4 nama yang mau di tampilkan
    select pertama, name=”name1″
    select kedua, name=”name2″
    dst.

    mohon pencerahan y mas makasi 🙂

    • Apakah dengan metode seperti diartikel ini? Kalau iya, ya tinggal tambahkan aja seperti contoh, ga ada perbedaan kok. Yang penting jangan sampe salah pada penamaan “name” untuk field select nya.

Leave a Reply

Your email address will not be published. Required fields are marked *