Mencari data ketika input di textbox dan secara otomatis data ditampilkan di textbox

Apakah anda ingin membuat form yang apabila mengetik sebuah kode, data langsung ada pada text selanjutnya ? kalau iya silahkan simak postingan ini...

Mungkin cara inputan form seperti ini sangat sulit dipecahkan bagi yang baru mengenal pemrograman javascript, kali ini saya akan memberikan contoh kode untuk membuat form seperti yang dijelaskan diatas. silahkan di simak....,

Mencari data dan menampilkannya di textbox secara otomatis, menggunakan AJAX dan XML.

Buatlah file input_nilai.php
Copy kode dibawah ini

<script language="javascript">
// JavaScript Document
var xmlHttp;
//-------------membuat objek xmlHttpRequest
function GetXmlHttpObject()
{
try
 {
 // ngecek buat browser firefox, opera 8.0+, safari
 xmlHttp=new XMLHttpRequest();
 }
 catch (e)
  {
  // browser Internet Explorer
  try
   {
   // IE 6.0+
   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e)
    {
    // IE 5.0
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }   
return xmlHttp;
}

function tampilkan_data(kode, jumlah)
{
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
 {
  alert ("Browser tidak support HTTP Request");
 }
 var url="php_responseXML.php?kode="+kode
 url = url+"&jumlah="+jumlah
 xmlHttp.onreadystatechange=function()
 {
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     {
    xmldoc = xmlHttp.responseXML;
          document.myForm.txtnama.value=xmldoc.getElementsByTagName("nama")[0].childNodes[0].nodeValue;
    document.myForm.txtalamat.value=xmldoc.getElementsByTagName("alamat")[0].childNodes[0].nodeValue;
    document.myForm.txtkota.value=xmldoc.getElementsByTagName("kota")[0].childNodes[0].nodeValue;
    document.myForm.txttanggal.value=xmldoc.getElementsByTagName("tanggal")[0].childNodes[0].nodeValue;
    document.myForm.txttotal_jumlah.value=xmldoc.getElementsByTagName("total")[0].childNodes[0].nodeValue;
     }
 }
 xmlHttp.open("GET",url,true);
 xmlHttp.send(null);
}
</script>

<form name="myForm" action="" method="post" onSubmit="return cekkosong(this)">
<input type="text" name="txtjumlah" id="txtjumlah" size="15" />

<input type ="text" 
name  ="txtkode" 
id   ="txtkode" 
size  ="15" 
onKeyUp  ="tampilkan_data(this.value,myForm.txtjumlah.value);" />

<input type="text" name="txtnama" id="txtnama" size="15" />
<input type="text" name="txtalamat" id="txtalamat" size="15" />
<input type="text" name="txtkota" id="txtkota" size="15" />
<input type="text" name="txttanggal" id="txttanggal" size="15" />
<input type="text" name="txttotal_jumlah" id="txttotal_jumlah" size="15" />
<input type="submit" name="tombol" value="Simpan" />
</form>

Buat File dengan nama php_responseXML.php
Copy kode dibawah ini

<?
header('content-type:text/xml');
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: ". gmdate("D, d M Y H:i:s"));
if($_SERVER["SERVER_PROTOCOL"]=="HTTP/1.0")
 header("Pragma: no-cache");
else
 header("Cache-Control: no-cache, must-revalidate");

$kode =$_GET['kode'];
$jumlah =$_GET['jumlah'];

/*********=---Proses--=***********/
//Disini anda bisa mencari data dari mysql, untuk source code
//silahkan anda kembangkan sendiri. OK.
$nama  = "Namaku";
$alamat = "Alamatku";
$kota  = "Kotaku";
$tanggal= "Tanggal";
$total  = intval($jumlah)*10;
/********************************************************/
echo"
     <data>
   <nama>".$nama."</nama>
   <alamat>".$alamat."</alamat>
   <kota>".$nama."</kota>
   <tanggal>".$kota."</tanggal>
   <total>".$total."</total>
     </data>
";
?>

Posted in: AJAX