Cara Membuat Form Input Otomatis Menggunakan PHP dan AJAX

Assalamualaikum wr.wb

Hari ini admin akan berbagi tentang bagaimana cara membuat form input otomatis menggunakan php dan ajax. Jadi seperti ini kasusnya misalnya kita akan membuat form peminjaman buku, ketika kita menginputkan id buku otomatis judul buka dan nama pengarang akan terisi otomatis sesui dnegan database tanpa kita harus mengetiknya sangat praktis bukan ??

Oke langsung saja kita buat database dengan nama buku dan tabel dengan nama buku juga di phpmyadmin. 

Kemudian kita buat fieldnya seperti id, judul, pengarang dan jml lihat gamabar berikut

Kemudian isikan juga datanya seperti ini 

Setelah selesai, kita buat folder di htdocs dengan nama semisal latihan-ajax lalu kita buat file koneksi.php berikut scriptnya

<?php
$host="localhost";
$user="root";
$pass="";
$db="buku";
mysql_connect($host,$user,$pass) or die (mysql_error());
mysql_select_db($db);
?>

simpan di dalam satu folder latihan-ajax

lalu bikin file index.php seperti ini

<?php
include "koneksi.php";
?>
<table style="padding:20px" border="1"width="30%">
<b style="padding:20px">Form Peminjaman Buku</b>
<form action="" method="">
<!--setiap inputyang berhubungan dengan script ajax wajib diberi tag id   -->
<tr><td><input name="id" id="id" placeholder="Masukan Id Buku" size="40"></td></tr>
<tr><td><input name="judul" id="judul" placeholder="Judul Buku" size="40" disabled></td></tr>
<tr><td><input name="pengarang" id="pengarang" placeholder="Nama Pengarang"  size="40"disabled></td></tr>
<tr><td><input name="jml" id="" placeholder="Jumlah yang di pinjam" size="40"></td></tr>
<tr><td><input name="kirim" type="submit" value="kirim">&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="batal">
</form>
</table>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function() {
$("#id").change(function(){     //membuat validasi id buku
var id = $("#id").val();
$.ajax({
url: 'cekbuku.php',     //script untuk menangkap dan memproses id buku yang di POST (dipilih)
type: 'POST',           //type method menggunakan POST
dataType: 'json',       //type data
data: {
'id': id         
},
success: function (buku) {                    //jika berhasil membuat fungsi buku
$("#judul").val(buku['judul']);           //id judul sesuai dengan validasi judul buku
$("#pengarang").val(buku['pengarang']);   // id pengarang sesuai dengan validasi nama pengarang
}
});
});
$("form").submit(function(){     //mengirim data id yang telah di post
});
});
</script>

Kemudian bikin file cekbuku.php seperti ini scriptnya

<?php
include 'koneksi.php';
$id=@$_POST['id'];  //menangkap id yang disubmit
//memilih semua data di tabel buku sesuai dengan id yang disubmit
$query = mysql_query("SELECT * FROM buku WHERE id='$id'") or die (mysql_error());
$data = mysql_fetch_array($query);
echo json_encode($data); //menampilkan data json
?>

Agar script ajax bisa berjalan maka kita perlu file jquery Download disini

setelah itu taruh file Jquery di folder yang sama yaitu di latihan-ajax seperti gambar dibawah ini 

untuk memudahkan bisa kalian download contoh program latihan-ajax disini

Kalian bisa test programnya dengan mengetikan alamat localhost/latihan-ajax di web browser.

Demikian tutorial cara membuat form input otomatis menggunakan php dan ajax, semoga bermanfaat selemat mencoba 

Wassalamualaikum wr.wb