Mengisi form otomatis / autofill form fields

Banyak yang bertanya pada ane “bagaimana cara membuat supaya form terisi otomatis?“, padahal setau ane banyak sekali artikel yang membahas tentang cara mengisi form otomatis, baik itu menggunakan javascript murni ataupun framework seperti jQuery. Nah daripada ane selalu nyuruh cari sendiri mendingan ane buat deh artikelnya.

Pada artkel ini, ane menggunakan salah satu framework javascript untuk mempermudah pembuatan, silahkan download jQuery dan jQuery form autofill. Jika sudah, mari kita mulai coding. Pertama buatlah sebuah file html atau php kemudian include / import dulu framework javascript yang sudah didownload seperti berikut:

Jangan lupa untuk menyesuaikan path tempat meletakkan file javascript-nya. Untuk penempatannya boleh berada diatas (header) ataupun dibawah (footer), kalau ane pribadi lebih menyarankan dibawah (footer). Selanjutnya mari kita buat sebuah form yang simple. Kira – kira seperi berikut ini:

Sepertinya ga ada yang perlu dipertanyakan, karena scriptnya simple banget. Kemudian buatlah perintah javascript seperti berikut ini:

Pada script diatas, ternyata perintah yang mendeklarasikan variable arData yang berisi 2 buah array. Masing – masing array berisi beberapa object yaitu name, email dan phone. Untuk tingkat advance, arData dapat diambil dari php menggunakan ajax dan mendapatkan response berupa json. Kemudian data json tersebut di convert menjadi seperti array yang ane buat pada script diatas.

Selanjutnya adalah membuat perintah supaya tombol Submit berjalan sesuai dengan yang kita inginkan, yaitu jika pilihan nama telah diisi, maka email dan phone akan terisi secara otomatis atau autofill. Looping dan condition yang ane buat pada script diatas adalah untuk menentukan data mana yang akan digunakan untuk autofill berdasarkan data dari deklarasi variable arData.

Gampang kan buatnya? Oh iya, berikut ini adalah script nya secara keseluruhan.

Jika ada pertanyaan atau saran silahkan comment yah ^_^.

24 comments

Leave a Reply

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