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 ^_^.

Jika bermanfaat, follow dan share ya...
30 Comments
  1. doctordoolittle
    • Apri Pardede
      • doctordoolittle
        • Apri Pardede
  2. sofyanto
    • Apri Pardede
  3. Jhon Doe
    • Apri Pardede
  4. jupriadi
    • Apri Pardede
  5. mokh dudy fahrizal
    • Apri Pardede
  6. mila
    • Apri Pardede
  7. Norman Arief
    • Apri Pardede
  8. Pemula
    • Apri Pardede
      • Pemula
        • Apri Pardede
  9. misil
    • Apri Pardede
  10. tantri
    • Apri Pardede
  11. anonym
    • Apri Pardede
  12. anonym
    • Apri Pardede
      • anonym
        • Apri Pardede

Leave a Reply

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

error

Jika bermanfaat, follow dan share ya...