Jum'at Pon 13 September 2024 15:33

learn make rich

share make it perfect

Ayat Suci

Sesungguhnya dia dahulu (di dunia) bergembira di kalangan kaumnya (yang sama-sama kafir).
(QS. AL INSYIQAAQ:13)

otomatis refresh

Javascript ayat

Proyek Saat Ini

Aplikasi SMS
Download aplikasi
Download Source (Delphi)

SMS Autorespond (VB)

Daftar Fungsi

pasaran
Mencari nama hari dan nama pasaran

pdu2sms
Konversi dari PDU ke Teks SMS

bacarss
Membaca RSS dari beberapa situs

Para Rekan

FlazX.com - Your Computer & IT Learning Center & eBook Directory

Misi penyelamatan data, baik oleh virus, harddisk rusak ataupun hilang

Delphindo
Delphindo

Link Exchange

MyWeblog

Autocomplete Pada Form

Contoh script berikut ini menampilkan cara mengisi value field suatu form, tanpa harus melakukan submit data

Aryo Sanjaya

Rabu Pahing, 5 April 2006

Hampir sama dengan artikel Merubah Isi Combobox, artikel ini menerapkan AJAX sebagai teknik untuk memanipulasi tampilan. Yang membedakan adalah, teknik ini menggunakan XML sebagai format data kembalian dari script PHP, dikarenakan jumlah data yang lebih banyak.

Simpan file ini dengan nama tesautocomplete.html:

<html> <head> <title>Tes Autocomplete</title> </head> <body> <script type='text/javascript'> function createRequestObject() { var ro; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer"){ ro = new ActiveXObject("Microsoft.XMLHTTP"); }else{ ro = new XMLHttpRequest(); } return ro; } var xmlhttp = createRequestObject(); function cari(teks) { var kode = teks.value; if (!kode) return; xmlhttp.open('get', 'getdata.php?kode='+kode, true); xmlhttp.onreadystatechange = function() { if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) { var r = xmlhttp.responseXML.getElementsByTagName('data'); document.getElementById("nama").value = r[1].firstChild.data; document.getElementById("harga").value = r[2].firstChild.data; } return false; } xmlhttp.send(null); } </script> <form> Kode: <input type="text" onchange="javascript:cari(this)"/><br/> Nama Barang : <input type="text" id="nama" /><br/> Harga : <input type="text" id="harga" /><br/> </form> </body> </html>

File PHP, simpan dengan nama getdata.php:

<?php $kode = $_GET['kode']; $nama = ""; $harga = ""; if ($kode == "1") { $nama = "satu"; $harga = "1000"; } else if ($kode == "2") { $nama = "dua"; $harga = "2000"; } else { $nama = "tidak ketemu"; $harga = "0"; } header("content-type: text/xml"); echo " <xmlresponse> <data>$kode</data> <data>$nama</data> <data>$harga</data> </xmlresponse> "; ?>

Pada script utama (tesautocomplete.html), yang dilakukan adalah:

melihat perubahan pada textbox kode
jika kode dirubah (event onchange), maka fungsi cari( ) akan dijalankan
pada fungsi cari, diambil value dari kode yang diketikkan
mem-fetch script getdata.php dengan parameter kode sesuai value yang dipilih
user menunggu output dari getdata.php
script ambildata.php dijalankan, dan memproses kode yang diberikan
memberikan output sesuai dengan hasil proses
output diterima oleh javascript
data yang diterima, diparsing sesuai dengan tag "data"
masing-masing data ditampilkan pada field yang bersangkutan

Untuk mencoba script di atas, silakan masuk Tes Autocomplete.

Selamat coding :)

Kirim via Email :: Tampilkan Versi Cetak

Komentar

djupi

djupiter@...

Jum'at Legi, 23 Juni 2006

Kalo datanya diambil dari database gimana caranya?

Rencana mo buat program sirkulasi untuk perpus gitu.

Ntar masukkan nama, trus keluar buku yang dipinjamnya.

Mengisi Komentar

Daftar Artikel PHP

» Menghitung Jarak Waktu (4)

Rabu Wage, 17 Mei 2006

Mengitung jarak waktu dan menampilkan sebagai Javascript

» Grabbing Kurs Dari BI (10)

Rabu Pahing, 5 April 2006

Grabbing data adalah tindakan tidak sopan. Tapi kali ini yang dibahas adalah teknik grabbing, masalah moral dan etika silakan cari sendiri (inspired by Iwan Fals)

» Merubah Isi Combobox (1)

Selasa Legi, 4 April 2006