Menampilkan data dari database Otomatis di textbox dengan Ajax Jquery

Publish Date : 12-06-2020 , dibaca 46413 kali, Hari ini dibaca : 1 kali ,0 comments

Tutorial ini sudah saya upgrade ke Mysqli , untuk mysql juga ada...Kali ini kita akan membuat script untuk mengisi field di form secara otomatis atau dengan kata lain Menampilkan data berdasarkan id ke textbox secara otomatis maksudnya jika kita menginputkan data yang menjadi id / primary , maka data yang lain akan masuk secara otomatis , Untuk menampilkan data di textbox sesuai data yang ada didatabase yang dengan bahasa lainnya mungkin menampilkan isi field secara otomatis setelah input field pertama, ,ok.. berikut script php menampilkan data otomatis

Contoh Pertanyaan

"Misalkan ada form data mahasiswa dengan field NPM dan nama, apakah bisa field nama terisi otomatis ketika kita mengisikan NPM pada field npm?"

Cara Menampilkan Data Otomatis

contoh database :

CREATE DATABASE datamahasiswa;
use datamahasiswa;
create table mahasiswa(
    npm int not null PRIMARY KEY,
    nama varchar(30) not null
    );
    
insert into mahasiswa(
    npm, nama) VALUES (10753001,'Nama Mahasiswa1');
insert into mahasiswa(
    npm, nama) VALUES (10753002,'Nama Mahasiswa2');
insert into mahasiswa(
    npm, nama) VALUES (10753003,'Nama Mahasiswa3');
insert into mahasiswa(
    npm, nama) VALUES (10753004,'Nama Mahasiswa4');

Selanjutnya kita buat file form.html dan ajaxrespon.php
form.html ini kita gunakan untuk menampilkan form kita.sedangkan ajaxrespon.php akan kita gunakan untuk menangani ajaxrequest dari jQuery kita pada form yang kita buat.

isi dari form.html

<!DOCTYPE html>
<html>
<head>
 <title>BELAJAR AJAX</title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>   <!-- INCLUDE jQuery -->
</head>
<body>
<form action="#" method="post">
 <input type="text" name="npm" id="npm" placeholder="NPM">
 <input type="text" name="nama" id="nama" placeholder="Nama">
 <input type="submit" value="simpan">
</form>

<script type="text/javascript">
$(document).ready(function(){

 $('#npm').change(function(){    // KETIKA ISI DARI FIEL 'NPM' BERUBAH MAKA ......
  var npmfromfield = $('#npm').val();  // AMBIL isi dari fiel NPM masukkan variabel 'npmfromfield'
  $.ajax({        // Memulai ajax
    method: "POST",      
    url: "ajaxrespon.php",    // file PHP yang akan merespon ajax
    data: { npm: npmfromfield}   // data POST yang akan dikirim
  })
    .done(function( hasilajax ) {   // KETIKA PROSES Ajax Request Selesai
        $('#nama').val(hasilajax);  // Isikan hasil dari ajak ke field 'nama' 
    });
 })
});
</script>
</body>
</html>

isi script ajaxrespon.php dengan MYSQL

<?php
$koneksi = mysql_connect("localhost","root","");    // BUKA KONEKSI DENGAN DATABASE MYSQL
// host : localhost - user : root - password : kosong

$db = mysql_select_db('datamahasiswa'); // TENTUKAN NAMA DATABASE

$npm = $_POST['npm']; // Menerima NPM dari JQuery Ajax dari form

$s = mysql_query("select * from mahasiswa where npm='$npm'"); // Ambil nama mahasiswa berdasarkan npm yang dikirim dari jquery ajax
while ($data = mysql_fetch_array($s)) {       
 echo $data[1]; // Print nama hasil perolehan dari query database
}
?>

isi script ajaxrespon.php dengan MYSQLi

<?php
$server = "localhost";
$username = "root";
$password = "";
$database= "datamahasiswa";
$konek = mysqli_connect($server,$username,$password,$database);
/* check connection */
if (mysqli_connect_errno()) {
 printf("Connect failed: %s\n", mysqli_connect_error());
 exit();
}

$npm = $_POST['npm']; // Menerima NPM dari JQuery Ajax dari form
$s = mysqli_query($konek, "select * from mahasiswa where npm='$npm'"); // Ambil nama mahasiswa berdasarkan npm yang dikirim dari jquery ajax
while ($data = mysqli_fetch_array($s)) { 
 echo $data[1]; // Print nama hasil perolehan dari query database
}
?>

Bagaimana menampilkanya lebih dari satu textbox...???? lihat artikel Tampil data di beberapa textbox Berdasarkan Combobox Demikian.. artikel cara menampilkan data di textbox sesuai data yang ada didatabase, semoga bermanfaat...

Tutorial Input Data Barang PHP MYSQL
Previous Post

Membuat Pencarian Data PHP MYSQL
Next Post