Mungkin ini bisa jadi referensi gan
1. Struktur databasenya nama database "dbsaya"
| -- phpMyAdmin SQL Dump |
| -- version 4.5.1 |
| -- http: |
| -- |
| -- Host: 127.0.0.1 |
| -- Generation Time: Jan 11, 2017 at 03:58 AM |
| -- Server version: 10.1.19-MariaDB |
| -- PHP Version: 5.5.38 |
| |
| SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; |
| SET time_zone = "+00:00"; |
| |
| CREATE TABLE `tabel1` ( |
| `id_tbl` varchar(5) NOT NULL, |
| `na_tbl` varchar(10) NOT NULL, |
| `al_tbl` varchar(10) NOT NULL, |
| `no_tbl` varchar(10) NOT NULL |
| ) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
| |
| |
| INSERT INTO `tabel1` (`id_tbl`, `na_tbl`, `al_tbl`, `no_tbl`) VALUES |
| ('001', 'asri', 'bjb', '0811'); |
| |
| |
| CREATE TABLE `tabel2` ( |
| `id_tbl` varchar(5) NOT NULL, |
| `na_tbl` varchar(10) NOT NULL, |
| `al_tbl` varchar(10) NOT NULL, |
| `no_tbl` varchar(10) NOT NULL |
| ) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
| |
| |
| INSERT INTO `tabel2` (`id_tbl`, `na_tbl`, `al_tbl`, `no_tbl`) VALUES |
| ('001', 'rian', 'bjm', '0812'); |
| |
| ALTER TABLE `tabel1` |
| ADD PRIMARY KEY (`id_tbl`); |
| |
| -- |
| -- Indexes for table `tabel2` |
| -- |
| ALTER TABLE `tabel2` |
| ADD PRIMARY KEY (`id_tbl`); |
| |
Buat file dengan nama proses-ajax.php
| <?php |
| include 'koneksi.php'; |
| $idterima = $_GET['idkirim']; |
| $tabelterima = $_GET['tabelkirim']; |
| $query = mysqli_query($koneksi, "select * from $tabelterima where id_tbl='$idterima'"); |
| $ambil = mysqli_fetch_array($query); |
| $data = array( |
| 'data1' => $ambil['na_tbl'], |
| 'data2' => $ambil['al_tbl'], |
| 'data3' => $ambil['no_tbl'],); |
| echo json_encode($data); |
| ?> |
File koneksi.php
| <?php |
| |
| $host = "localhost"; |
| $user = "root"; |
| $password = ""; |
| $database = "dbsaya"; |
| |
| $koneksi = mysqli_connect($host, $user, $password, $database); |
| ?> |
Untuk menampilkan nya yaitu file form-ajax.php
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Ajax Jquery - Belajarphp.net</title> |
| </head> |
| <body> |
| <form action=""> |
| <table> |
| <tr><td>ID</td><td><input type="text" id="id"></td></tr> |
| <tr><td>TABEL</td><td><select type="text" onchange="isi_otomatis()" id="tabel"> |
| <option value="">Pilih tabel</option> |
| <option value="tabel1">tabel1</option> |
| <option value="tabel2">tabel2</option> |
| </select></td></tr> |
| <tr><td>NAMA</td><td><input type="text" id="nama"></td></tr> |
| <tr><td>ALAMAT</td><td><input type="text" id="alamat"></td></tr> |
| <tr><td>NOHP</td><td><input type="text" id="nohp"></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 idambil = $("#id").val(); |
| var tabelambil = $("#tabel").val(); |
| $.ajax({ |
| url: 'proses-ajax.php', |
| data:"idkirim="+idambil+"&tabelkirim="+tabelambil, |
| }).success(function (data) { |
| var json = data, |
| obj = JSON.parse(json); |
| $('#nama').val(obj.data1); |
| $('#alamat').val(obj.data2); |
| $('#nohp').val(obj.data3); |
| }); |
| } |
| </script> |
| </body> |
| </html> |
Saat di jalankan form-ajax.php masukkan dulu id baru pilih tabel