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.

<html>
    <head>
        <title>Mengisi form otomatis dengan ajax</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">
            $(document).ready(function(){
                $('#btnSubmit').click(function(){
                    $.ajax({
                        url: 'getdata.php',
                        type: 'post',
                        dataType: 'json',
                        data: {name: $('select[name=name]').val()},
                    }).done(function (json) {
                        $("#form").autofill(json.data);
                    });
                });
            });
        </script>
    </body>
</html>

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.

<?php
    $data = file_get_contents('data.json');
    $data = json_decode($data);

    $output = new stdClass();
    $output->success = false;
    $output->data = array();

    foreach ($data as $k => $v) {
        if (strtolower($v->name) == strtolower($_POST['name'])) {
            $output->success = true;
            $output->data = $v;
        }
    }

    echo json_encode($output);
?>

$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

[{
    "name": "John Doe",
    "email": "johndoe@mail.com",
    "phone": "1234567890"
}, {
    "name": "Doel Sumbang",
    "email": "doel@mail.com",
    "phone": "0987654321"
}]

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

Jika bermanfaat, follow dan share ya...
8 Comments
  1. alena
    • Apri Pardede
  2. taufik
    • Apri Pardede
  3. Deddy
    • Apri Pardede
  4. anonym
    • Apri Pardede

Leave a Reply

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

error

Jika bermanfaat, follow dan share ya...