Kamis, 18 Agustus 2011

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>
";
?>

10 komentar:

tryco mengatakan...

ijin sedot gan

Anonim mengatakan...

program setengah", ga jalan min.. -_-"

alie mengatakan...

Sebelumnya terimakasih banyak kawan udah mau mengunjungi blog saya. "program setengah", ga jalan min.. -_-"" ikuti petunjuknya saja kawan pasti bisa. Cara compile menggunakan xampp atau sejenisnya, taruh file input_nilai.php dan php_responseXML.php ke dalam folder htdocs setelah itu buka browser misal Mozilla ketikkan alamat url : localhost/input_nilai.php. dan silahkan dicoba, semoga berhasil OK

alie mengatakan...

untuk meng-copy coding di atas klik saja tulisan "view plain" dan copy

Anonim mengatakan...

gan kalo di visual foxpro gimana?

alie mengatakan...

gunakan event textbox aja gan, misal Event Keypress akan memproses ketika ada suatu ketikan pada textbox, klu belum tepat googling aja gan...

CikCap Travel mengatakan...

trima ksih ilmunya gan, gimana klo nampil ada yang select..

seperti data pribadi :
jika di input no ktp
muncul nama (texbox)
jenis kelamin (select)

aNaztciLikg te2pCilick mengatakan...

gan, kalo diload di google crome bisa ngga? mohon code pengecekannya sprt di firefox dll

tryco mengatakan...

thanks gan informasinya

Anonim mengatakan...

terima kasih bro
setelah ulik jalan bro
sharing ilmu sangat berguna dan bermanfaat
mantaaap

Posting Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Justin Bieber, Gold Price in India