Menampilkan isi field secara otomatis setelah input field pertama.

doditri · Nov 3, 2012
bagaiamana menampilkan isi field secara otomatis setelah input field pertama? Contoh saya buat database db_barang,lalui saya input kode barang di field 1, cursor pindah ke field 2 maka di field 2 otomatis keluar nama barang. Mohon pencerahannya dari master Php....
Silahkan login untuk menjawab!
0
Ellyx Christian · Nov 6, 2012 · 0 Suka · 0 Tidak Suka
Gunakan jqueryui autocomplete.
Pertama download jqueryui di jqueryui.com
kedua bikin file dengan nama get_barang.php untuk mencari data:
<?php
$kode = $_GET['term'];
$conn = mysql_connect("localhost","root","");
mysql_select_db("nama_db");

$sql = "select * from db_barang where kode like '$kode%'";
$hs = mysql_query($sql);
$json = array();
while($rs = mysql_fetch_array($hs)){
	$json[] = array(
		'label' => $rs['kode'],
		'value' => $rs['kode'],
		'nama_brg' => $rs['nama_barang']
	);
}
header("Content-Type: application/json");
echo json_encode($json);
ketiga diform pake jquery ui seperti:
<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <!-- sesuaikan dengan path jqueryui yang kamu punya -->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
<form action="" method="post">
	Kode: <input type="text" name="kode" id="kode"/>
	Nama: <input type="text" name="nama" id="nama"/>
</form> 
<script>
    $(function() {
        $( "#kode" ).autocomplete({
            source: "get_barang.php",
            minLength: 2,
            select: function( event, ui ) {
		$('#nama').val(ui.item.nama_brg);
            }
        });
    });
</script>
</body>
</html>
0
dwinta ananda · Jan 3, 2014 · 0 Suka · 0 Tidak Suka
boleh minta tolong di cek, kak mana yang salah ya?
get_data.php
<?php
$id_pelanggan = $_GET['term'];
$conn = mysql_connect("localhost","root","");
mysql_select_db("db_denisputrae");
 
$sql = "select * from daftar_kolektif where id_pelanggan like '$id_pelanggan%'";
$hs = mysql_query($sql);
$json = array();
while($rs = mysql_fetch_array($hs)){
	$json[] = array(
		'label' => $rs['id_pelanggan'],
		'value' => $rs['id_pelanggan'],
		'nama_pelanggan' => $rs['nama_pelanggan'],
		'alamat_rumah' => $rs['alamat_rumah']
	);
}
header("Content-Type: application/json");
echo json_encode($json);

ini formnya, form_instalasi.php
<?php 
session_start();
 if (empty($_SESSION['username']) AND empty($_SESSION['passuser'])){
  echo " <center>Untuk mengakses modul, Anda harus login <br>";
  echo "<a href=login_admin.php><b>LOGIN</b></a></center>";
}
else{
include "config/koneksi.php";
include "top.php";?>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="config/jquery-1.10.2.js"></script>
<script type="text/javascript" src="config/jquery.validate.js"></script>
		<style type="text/css">
.error { font-size:small; color:red; }
		</style>
<script type="text/javascript">
$(document).ready(function() {
	$('#instalasi').validate();
});
$('#instalasi').validate({
	rules: {
		id_pelanggan : {
			digits: true,
		},
		id_petugas : {
			digits: true,
		},
	},
	messages: {
		id_pelanggan: {
			required: "Kolom id harus diisi",
		},
		id_petugas: {
			required: "Kolom id harus diisi",
		},
	}
});
</script>
</head>
<body>
<?php

    echo "<center><h2>Tambah Data Instalasi</h2></center>"; ?>
          
<form method="POST" name="instalasi" id="instalasi" action="input_instalasi.php">
          <center>
		  <table>
          <tr><td>ID Pelanggan</td>  	 	<td> : <input type="text" name="id_pelanggan" size="30" class="required"></td></tr>
          <tr><td>Nama Pelanggan</td>  	 	<td> : <input type="text" name="nama_pelanggan" size="30" class="required"></td></tr>
          <tr><td>Alamat</td>   			<td> : <textarea name="alamat_rumah" cols=30 rows=3 class="required"></textarea></td></tr>
          <tr><td>ID Petugas</td>	  	 	<td> : <input type="text" name="id_petugas" size="30" class="required"></td></tr>
          <tr><td>Nama Petugas</td>  	 	<td> : <input type="text" name="nama_petugas" size="30" class="required"></td></tr>
          <tr><td>Tanggal Instalasi</td>    <td> : <input type="text" name='tanggal_instalasi' class="required"><a href='javascript:void(0)'
													onClick='if(self.gfPop)gfPop.fPopCalendar(document.instalasi.tanggal_instalasi);
													return false;'><img name='popcal' align='absmiddle' style='border:none'
													src='./calender/calender.jpeg' width='34' height='29' border='0' alt=''></a></td></tr>
          <tr><td><td colspan=2>			   <input type='submit' value='Simpan'>
                            				   <input type='button' value='Batal' onclick='self.history.back()'></td></td></tr>
		 
          </table></form></center></body>
		  <script>
    $(function() {
        $( "#id_pelanggan" ).autocomplete({
            source: "get_data.php",
            minLength: 2,
            select: function( event, ui ) {
		$('#nama_pelanggan').val(ui.item.nama_pelanggan);
            }
        });
    });
</script>

<!--  PopCalendar(tag name and id must match) Tags should not be enclosed in tags other than the html body tag. -->
<iframe width="174" height="189" name="gToday:normal:./calender/agenda.js" id="gToday:normal:./calender/agenda.js" src="./calender/ipopeng.htm" scrolling="no" frameborder="0" style="visibility:visible; z-index:999; position:absolute; top:-500px; left:-500px;">
</iframe>
<?php
}
?>
kenapa ga bisa ya ka? padahal coba code dari kaka bisa ko walaupun value diganti. makasih sebelumnya