Mudah Membuat Form Otomatis terisi Atau Autofill Dengan Jquery Ajax

Share:
Mudah Membuat Form Otomatis terisi Atau Autofill Dengan Jquery Ajax. Assalamualaikum, halo semuanya, kembali lagi di sahretech. Kali ini saya akan berbagi tutorial cara membuat form inputan otomatis terisi berdasarkan nomor unik seperti NIM, NIK, ID atau nomor unik lainnya.

Pernahkah kalian menggunakan sebuah aplikasi yang mempunyai fitur ketika nomor unik seperti ID atau NIM diisi maka form lainnya akan ikut terisi ?. Jika kalian pernah menggunakan aplikasi tersebut dan penasaran bagaimana cara membuatnya, artinya kalian tepat berada di website ini. Untuk memperjelas, saya berikan gambar gif di bawah ini.





Di atas adalah contoh aplikasinya, begitu kita menginputkan NIM maka data-data lainnya otomatis terisi. Cara seperti ini bisa kalian gunakan untuk memperjelas data-data lainnnya saat melakukan penambahan data atau pengeditan data (karena kalo hanya NIM saja terkadang orang bingung NIM ini menunjukkan data yang mana )atau bisa juga untuk membuat form pencarian sesuai nomor NIM. Ok daripada berlama-lama langsung saja kita masuk ke tahap pembuatan





Cara Membuat Form Otomatis terisi Atau Autofill Dengan Jquery Ajax

  • 1. Buat sebuah database dengan nama latihan
  • 2. Buat sebuah tabel bernama latihan_autofill di dalam database latihan lalu ikuti struktur tabelnya seperti gambar di bawah ini
sahretech - struktur tabel autofill
Struktur tabel latihan_autofill


  • 3. Insert data dummy, data dummy adalah data pembantu untuk testing aplikasi yang kita buat. Kalian bisa menambahkan datanya lewat phpmyadmin lalu tambahkan data, isi 3 -5 data ke dalam database.
sahretech - cara menambahkan data lewat UI phpmyadmin
Cara menambahkan data ke dalam tabel latihan_autofill lewat UI


  • 4. Buat sebuah folder baru dengan nama latihanajax di dalam htdocs 
  • 4. Lalu buka editor web kalian, lalu buat sebuah file baru dengan nama form.php. Copy scriptnya seperti di bawah ini.

<!DOCTYPE html>
<html>
    <head>
        <title>belajar autofill - sahretech.com</title>
    </head>
    <body>
        <form action="">
            <table>
                <tr><td>NIM</td><td><input type="text" onkeyup="isi_otomatis()" id="nim"></td></tr>
                <tr><td>NAMA</td><td><input type="text" id="nama" disabled></td></tr>
                <tr><td>JENIS KELAMIN</td><td><input type="text" id="jeniskelamin" disabled></td></tr>
                <tr><td>JURUSAN</td><td><input type="text" id="jurusan" disabled></td></tr>
                <tr><td>NO TELP</td><td><input type="text" id="notelp" disabled></td></tr>
                <tr><td>EMAIL</td><td><input type="text" id="email" disabled></td></tr>
                <tr><td>ALAMAT</td><td><input type="text" id="alamat" disabled></td></tr>
            </table>
        </form>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript">
            function isi_otomatis(){
                var nim = $("#nim").val();
                $.ajax({
                    url: 'ajax.php',
                    data:"nim="+nim ,
                }).success(function (data) {
                    var json = data,
                    obj = JSON.parse(json);
                    $('#nama').val(obj.nama);
                    $('#jeniskelamin').val(obj.jeniskelamin);
                    $('#jurusan').val(obj.jurusan);
                    $('#notelp').val(obj.notelp);
                    $('#email').val(obj.email);
                    $('#alamat').val(obj.alamat);
                });
            }
        </script>
    </body>
</html>



  • 5. Buat sebuah file baru dengan nama ajax.php, file ini berfungsi untuk mengambil data dari database lalu kemudian diteruskan ke halaman form.php. Ikuti scriptnya seperti di bawah ini

<?php

//membuat koneksi ke database
$koneksi = mysqli_connect("localhost", "root", "", "latihan");

//variabel nim yang dikirimkan form.php
$nim = $_GET['nim'];

//mengambil data
$query = mysqli_query($koneksi, "select * from latihan_autofill where nim='$nim'");
$mahasiswa = mysqli_fetch_array($query);
$data = array(
            'nama'      =>  $mahasiswa['nama'],
            'jeniskelamin'      =>  $mahasiswa['jeniskelamin'],
            'jurusan'   =>  $mahasiswa['jurusan'],
            'notelp'      =>  $mahasiswa['notelp'],
            'email'      =>  $mahasiswa['email'],
            'alamat'    =>  $mahasiswa['alamat'],);

//tampil data
echo json_encode($data);
?>



  • 6. Saatnya untuk mencoba latihan, hidupkan apache dan mysql jika kalian menggunakan xampp lalu jalankan di browser dengan nama localhost/latihanajax/form.php maka hasilnya akan terlihat seperti gambar di bawah ini
sahretech - hasil autofill
Hasil autofill




Bagaimana mudah bukan?. Ternyata, membuat fitur autofill tidak sesulit yang dibayangkan cuma butuh beberapa langkah langsung jadi dech, sciptnya juga sangat sederhana dan mudah diotak-atik dan diimplementasikan di berbagai project latihan kalian lainnya.

Ok sekian tutorial Mudah Membuat Form Otomatis terisi Atau Autofill Dengan Jquery Ajax. Mudah-mudahan tutorial singakt ini dapat bermanfaat bagi para pembaca. Lebih dan kurangnya saya mohon maaf, bila ada kririk, saran dan pertanyaan silahkan tinggalkan di kolom komentar di bawah ini. Happy Coding :)



10 comments:

  1. kalau datanya mengambil dari endpoint api bagaimana ya gan ?

    ReplyDelete
    Replies
    1. Ganti urlnya dengan url endpoint json, lalu samakan datanya dengan objek yg ada di endpoint, lalu masukkan datanya ke input field sesuai dengan id

      Delete
  2. kalau setelah muncul isi otomatis, tapi saya mau dari hasil otomatis isi tersebut menjadi kunci pencarian kembali di tabel yg berbeda...gimana cara nya....

    contoh.... saya masukan id_pembeli.... dimunculkan otomatis nomorKTP, nama, alamat.
    saya mau cari data pembelian dengan relasi nomorKTP yg tadi sudah muncul otomatis....mengisi otomatis textfield barangdibeli, jumlah, harga

    gimana ya gan caranya

    ReplyDelete
    Replies
    1. Saya kurang paham pertanyaannya, tapi mungkin ini bisa mnejawab

      Lakukan cara yg sama seperti di atas, bedanya agan buat file json untuk tabel satu lagi, saat muncul nomor ktp tertentu maka otomatis memunculkan tabel pembelian tertentu. Beda yg lain: agan harus melooping data yg rownya lbih dri satu, sdngkan di atas hanya menampilkan data 1 data saja

      Delete
    2. nah,,, klo isinya data mahasiswa dalam 1 form lebih dari satu bgaimana.??
      Looping data tabelnya..

      Klo satu data, bisa.. tp ini saya utak-atik, klo lbih dari satu gmn.??

      Semoga bisa djawab. terima kasih._

      Delete
    3. mungkin lebih enak dibahas dalam artikel yang berbeda karena saya juga belum pernah coba, solusi lain untuk menampilkan banyak data seperti yang masnya tanyakan bisa membaca artikel saya berikut ini https://www.sahretech.com/2020/08/cara-membuat-fitur-pencarian-hanya.html. Di dalam artikel tersebut hasil pencarian data akan ditampilkan dalam bentuk tabel, untuk menampilkan dalam bentuk form tinggal copy saja kodingan loopingnya dan masukkan ke form input atau textarea

      Delete
  3. saya sudah mengikuti tutorialnya, tapi kenapa punya saya tidak otomatis isian datanya hilang ketika nim tidak sama atau dihapus?

    ReplyDelete
    Replies
    1. kalo saya nggak liat kodingannya langsung saya nggak bisa tau errornya dimana :) tapi bisa coba cara berikut gan:

      inspect element lalu buka console, jika terjadi error coba cari solusinya di internet, bisa buka stack overflow biasanya bnyak yg bahas...

      Delete
  4. saya mau bertanya kak bagaimana jika nim yang di input tidak berada di database? saya ingin memunculkan tulisan "data tidak ada " di from, saya sudah pake if else ; tidak bisa kak, solusinya kak, terimakasih

    ReplyDelete
    Replies
    1. .fail(function (jqXHR, textStatus, errorThrown) { serrorFunction(); });

      Delete