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:
<script type="text/javascript" src="js/jquery-min.js"></script> <script type="text/javascript" src="js/formautofill.min.js"></script>
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:
<form id="form">
name <select name="name">
<option></option>
<option value="John Doe">John Doe</option>
<option value="Doel Sumbang">Doel Sumbang</option>
</select>
email <input type="text" name="email">
phone <input type="text" name="phone">
<button type="button" id="btnSubmit">Submit</button>
</form>
Sepertinya ga ada yang perlu dipertanyakan, karena scriptnya simple banget. Kemudian buatlah perintah javascript seperti berikut ini:
var arData = [{
"name": "John Doe",
"email": "johndoe@mail.com",
"phone": "1234567890"
}, {
"name": "Doel Sumbang",
"email": "doel@mail.com",
"phone": "0987654321"
}];
$(document).ready(function(){
$('#btnSubmit').click(function(){
for (var x in arData) {
if (arData[x].name == $('#form select[name="name"]').val()) {
$("#form").autofill(arData[x]);
}
}
});
});
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.
<html>
<head>
<title>Mengisi form otomatis / autofill form fields</title>
</head>
<body>
<form id="form">
name <select name="name">
<option></option>
<option value="John Doe">John Doe</option>
<option value="Doel Sumbang">Doel Sumbang</option>
</select>
email <input type="text" name="email">
phone <input type="text" name="phone">
<button type="button" id="btnSubmit">Submit</button>
</form>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/formautofill.min.js"></script>
<script type="text/javascript">
var arData = [{
"name": "John Doe",
"email": "johndoe@mail.com",
"phone": "1234567890"
}, {
"name": "Doel Sumbang",
"email": "doel@mail.com",
"phone": "0987654321"
}];
$(document).ready(function(){
$('#btnSubmit').click(function(){
for (var x in arData) {
if (arData[x].name == $('#form select[name="name"]').val()) {
$("#form").autofill(arData[x]);
}
}
});
});
</script>
</body>
</html>
Jika ada pertanyaan atau saran silahkan comment yah ^_^.
About the Author
Apri Pardede
Ingin selalu berbagi ilmu bermanfaat yang kumiliki.
Gan kok gabisa ya, apa ada yg kurang scriptnya?
Yang ga bisa dimananya gan?
mungkin yang di #form arraynya harus dibikin manual
Maksudnya agan adalah data untuk autofill nya yah? Iya gan, harus dibuat dulu, berhubung dalam artikel ini tidak menggunakan data dari database, maka array (data) untuk autofill harus di deklarasikan dulu.
sepertinya, ulasannya masih kurang lengkap..soale setelah dicoba kok gak bisa.
Hmmm.. kurang dimananya yah gan? Karena seinget ane, waktu ane buat artikel sambil buat contohnya dari awal. Jadi yang ane jadiin artikel adalah hasil yang ane buat.
Gan, bagaimana kalo untuk data personil itu (seperti nama, email, telepon dsb) kita ambil dari tabel yang lain, sharing script nya gan?
Ok gan, ane usahakan. Mudah2an dalam waktu dekat ane buatkan artikelnya.
bagaimana kalo datanya di abil dari database gan.. mohon mnjelasnnya…
Ane akan buatkan autofill nya dengan menggunakan data dari database gan. Tapi ane blom bisa pastikan kapan gan, akan ane usahakan secepatnya.
Menggunakan dreamweaver bisa ga gan…?
maklum newbie, send email gan yaaa
Bisa gan. Bisa pake editor apa aja, seperti notepad, notepad++, sublime, netbean, dreamweaver, phpeditor dan lain – lain.
kalau mengisi otomatis berdasarkan foreign key gimana ya caranya? jadi ada 2 tabel yg memiliki beberapa field yang sama, tapi tabel2 ada foreign key dari tabel1 trus ketika foreign key sudah dipilih berdasarkan data dari tabel1 maka field dibawahnya akan langsung otomatis terisi mengikuti isi yg ada di tabel1 sesuai dg foreign key yg dipilih
Datanya dari database kan yah? Querynya sekalian aja pake “left join” jadi langsung diambil data dari tabel 1 dan tabel2 sekaligus berdasarkan foreign key. Selanjutnya hampir sama dengan artikel diatas.
gan kalo datanya diambil dari excel bisa nggak???
Bisa gan, tapi caranya agak repot, karena data dari excel harus diambil dulu dan di tampung dalam variabel atau bisa dimasukkan dulu ke database, kemudian lakukan seperti yang ada diartikel ini.
Itu kalo arData nya diganti pake DB tinggal masukkin pake DB ajah tah gan ?
Iya gan, tapi jangan lupa bahwa yang ada di contoh itu dalam javascript, ambil dulu data dari database didalam PHP, kemudian kirim ke javascriptnya.
Boleh Minta Contohnya ga kalo pake DB ? dibagian arDatanya tuh 😀 Mohon bantuannya ..
Mohon maaf gan ane baru baca. Kalau ane ada kesempatan nanti ane buatkan gan
gan, bisa kasi contoh form input dinams+autofill diatas?
Nanti kalau ada waktu dan kesempatan, ane buatkan gan
gan boleh ga klo demo yang di atas di tampilkan
Bisa sis, tapi ga dalam waktu dekat yah, soalnya lagi sibuk banget di kantor.
Gan Demonya ada gk,.?
Untuk saat ini blom ada ane tampilkan gan. Untuk kedepannya ane buat.
kalo kita pake framework codeigniter gmna gan,.???
Kebetulan yang ane buat diatas hanya pada tampilan dan js aja, kalau di codeigniter, script diatas masukkan aja didalam view nya gan
uda saya coba copy paste tpi gk bisa gan. field email dan phone gk masuk (gk mau muncul isinya). gak ada error juga, jadi bingung dmna salahnya. mohon bantuannya gan. terimakasih gan.
Coba scriptnya nya masukkan kedalam pastebin gan, supaya bisa ane liat scriptnya, mana tau ada yang salah