membuat pilihan kota otomatis menggunakan php ajax

Selamat bertemu kembali dalam poko bahasan AJAX bersama kami, kali ini kita akan membahas contoh aplikasi pilihan otomatis menggunakan AJAX dan PHP. dalam sebuah form input, seringkali kita menemukan contoh pilihan yang terisi secara otomatis, dalam pembahasan kali ini kami mengambil Provinsi dan Kota yang akan kita jadikan object.

Dalam sebuah provinsi terdapat beberapa kota, sehingga ketika user memilih provinsi tertentu, maka pilihan kota secara otomatis hanya akan terisi dengan nama - nama kota yang ada dalam provinsi tersebut, untuk lebih mengarahkan user pada alamat yang lebih jelas.

 

Seperti biasa, pembahasan kali ini juga kita bagi menjadi tiga script , yaitu :

  1. script pilihan.php yang merupakan form inputan yang akan digunakan oleh user untuk memilih provinsi dan kota
  2. script prmajax.js yang merupakan script ajax untuk mengirimkan data provinsi yang telah dipilih oleh user dan mengambil jawaban yang diberikan oleh script pemroses
  3. script opsi.php yang merupakan script pemroses data yang telah dipilih oleh user

1. script pilihan.php

<html>
	<head>
		<title>Belajar AJAX</title>
		<script type="text/javascript" src="prmajax.js"></script>
	</head>
	<body>
	<div id="dom_pesan"></div>
	<form name="frm">
		<table width="300" style="border:silver 1px solid; border-radius:5px;">
		<tr>
			<td colspan="2">FORM INPUT DATA</td>
		</tr>
		<tr>
			<td width="100">Provinsi</td>
			<td>
				<select name="prov" onchange="pilih_kota('dom_kota',this.value);">
					<option value="#">Provinsi</option>
					<option value="jatim">Jawa Timur</option>
					<option value="jateng">Jawa tengah</option>
					<option value="jabar">Jawa Barat</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>Kota</td>
			<td>
				<select name="kota" id="dom_kota">
					<option value="#">Pilih kota</option>
				</select>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" name="btn" value="Kirim" onclick="kirim_data('dom_pesan');" />
			</td>
		</tr>
	</form>
	</body>
</html>

Perhatikan event onchange yang terdapat pada pilihan provinsi , yaitu onchange = pilih_kota('dom_kota',this.value) yang artinya pada event ini akan dikirimkan value dom_kota dan value dari combo box yang telah dipilih oleh user

2. script prmajax.js

function pilih_kota(dom,kota) {
    document.getElementById(dom).innerHTML="Loading ...";
    var xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null) {
        alert ("Your browser does not support AJAX!");
        return;
    }
    var date=new Date();
    var timestamp=date.getTime();
	//alamat url script pemroses, sesuaikan dengan alamat url yang ada pada komputer anda
    var url="http://localhost/tutorial/ajax/option.php";
	//menyusun variabel yang akan dikirimkan dengan AJAX
    var param="kota="+kota;
	
	//tidak perlu dirubah
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
            var res=xmlhttp.responseText;
            document.getElementById(dom).innerHTML=res;
        }
    }
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", param.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(param);
	//tidak perlu dirubah
}


function GetXmlHttpObject() {
    var xmlhttp=null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlhttp=new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlhttp;
}

bagian pilih_kota(dom,kota) merupakan parameter yang dilewatkan pada event onchange yang kita tanamkan pada script pilihan.php, dalam hal ini value dari parameter tersebut adalah dom_kota dan juga kode provinsi yang terdapat pada pilihan provinsi seperti jatim, jateng dan jabar.

3. script option.php

<?php
$kota = array (
			'jatim' => array (
							'1' => 'Malang',
							'2' => 'Pasuruan',
							'3' => 'Probolinggo',
							'4' => 'Lumajang'
						),
			'jateng' => array (
							'1' => 'Semarang',
							'2' => 'Solo',
							'3' => 'Klaten',
							'4' => 'Magelang'
						),
			'jabar' => array (
							'1' => 'bandung',
							'2' => 'Banten',
							'3' => 'Karawang',
							'4' => 'Bekasi'
						),
			'lain'	=> array (
							'1' => 'Pilih kota'
						)
		);

$opsi = $_POST['kota'];
if($opsi =='jatim'){
	$arr = $kota['jatim'];
}
else if($opsi == 'jateng'){
	$arr = $kota['jateng'];
}
else if($opsi=='jabar'){
	$arr = $kota['jabar'];
}
else{
	$arr = $kota['lain'];
}
foreach($arr as $key => $val){
	echo '<option value="'.$key.'">'.$val.'</option>';
}
?>

Dalam contoh script option diatas, menyingkat tutorial ini dengan membuat pilihan kota dalam bentuk data array supaya tidak terlalu memperpanjang poko pembahasan. Jika pembaca ingin mendatabasekan kota dan provinsi, maka struktur script opiton.php akan menjadi lebih ringkas.

selamat mencoba dan mengembang script diatas, silahkan download contoh script yang sudah kami uji coba pada link download di bawah

Download contoh script pilihan otomatis dengn ajax


Komentar pembaca

rhidwanko yang kotannya ga keluar min, yg muncul hanya provinsinya saja.posting pada :2012-11-09 17:08:00
AdminPada kondisi normal / awal , pilihan yang keluar hanyalah bagia provinsi, dan pada bagian kota belum muncul nama kota, akan tetapi kalo kita sudah memilih salah satu provinsi, maka bagian kota secara otomatis akan terisi dengan nama - nama kota yang berada pada provinsi tersebut.posting pada :2012-11-10 07:59:43
samga bisa pak, pilih kota nya ga bis muncul. ada yg salah kayaknya tuh script.posting pada :2012-11-29 11:23:59
sahdangimana buat pilihan 4 variabel sekaligus contohnya propinsi, kota, kecamatan, desa/kelurahanposting pada :2012-11-30 16:57:13
AdminScript diatas terdiri dari 3 file , file yang seharusnya di buka adalah file pilihan.php melalui webserver, kami sudah mencobanya dan script diatas berjalan normal. Kemudian untuk membuat tambahan pilihan lain setelah kota, maka kita perlu melakukan penambahan event onchange pada pilihan kota, begitu pula pada script prmajax.js, kita juga harus membuat function tambahan sebagai action dari event onchange yang ada pada pilihan kota tersebutposting pada :2012-12-07 10:19:37
irfanSeblumnya terima kasih atas tutorialnya, saya ingin mencoba sendiri drumah mohon update link download, karena ketika di klik download tidak muncul, terima kasih :)posting pada :2013-01-09 19:43:37
AdminIrfan, Silahkan coba kembali link download yang kami sediakan, kami baru saja melakukan update link tersebut sesuai dengan laporan yang anda sampaikan kepada kami, terimakasih atas bantuannya.
Jika pilihan kota tidak keluar pada saat script di jalankan, silahkan melakukan perubahan pada script prmajax.js , ganti alamat url script option sesuai dengan lokasi baru pada komputer anda.
 var url="http://localhost/tutorial/ajax/option.php";
Jika kita menyimpannya dalam folder dengan nama test pada root web server, maka alamat urlnya menjadi :
 var url="http://localhost/test/ajax/option.php";
Semoga bermanfaat
posting pada :2013-01-09 20:44:21
amilbagaimana seandainya cuma pake javascript saja.. mohom pencerahannya??posting pada :2013-03-17 20:11:37
zenefilgan, gimana semisal saya cuma pkai select biasa terus ada dua tipe select yang pertama provensi, yang kedua kota. dan saya di sini menggunakan metode post untuk mendapatkan value yang telah di pilih setelah itu di tampilkan di file itu juga. masalahnya jika kita menggunakan metode post, anggaplah di provensi kita pilih jawa timur kemudian klik tombol ok untuk mendapatkan outputnya, nah setelah itu select akan refresh ke default pilihan yang awal,, tapi klo ingin pilihan tetap untuk yang sudah di pilih gmn ganposting pada :2013-06-29 16:21:47
AdminSdr Amil dan Sdr Zen, kami sudah membuat tutorial lain yang lebih simple. Silahkan cek pada alamat berikut : http://media-kreatif.com/home/post/67/membuat-pilihan-type-kendaraan-seperti-pada-situs-jual-beli-kendaraan.prm Menanggapi pertanyaan sdr Zen, cara tersebut pada dasarnya bisa dilakukan dengan menggunakan bantuan SESSION, dimana pada saat POST, akan dibuat SESSION dari pilihan tersebut yang selanjutnya akan dipakai untuk mengunci pilihan pertama. Tetapi cara ini sangat tidak direkomendasikan mas, terutama jika pilihan yang terdapat dalam halaman tersebut cukup banyak, akan sangat menyulitkan. posting pada :2013-07-01 17:22:04
khalishMas Admin; sebelum saya baca tutorial ini untuk menampilkan kecamatan, kota dan provinsi saya menggunakan javascript php mysql; data semua tampil dengan normal dan hasilnya memuaskan, namun kendalanya browsernya jadi lambat saat loading data tersebut. untuk menggunakan ajax saya masih awam dan belum paham untuk penggunanya, jika menurut tutorial diatas apabila data kota berasal dari database mysql bagianmana yg harus diubah ya...?? terima kasih sebelumnyaposting pada :2013-07-18 21:08:24
AdminSdr Khalish, silahkan lihat contoh lain script pilihan kota otomatis dengan jQuery AJAX , PHP dan MySQL pada alamat berikut : http://media-kreatif.com/home/post/74/membuat-pilihan-kota-otomatis-dengan-jquery-ajax-dan-php-mysql.prmposting pada :2013-07-20 22:26:13
riomas admin,,itu kan klo provinsi dan kota ny dlm bentuk array,, tlong tutorialnya klo provinsi dan kota nya dlm bentuk database ?? please. . .posting pada :2013-11-30 11:09:36
AdminSdr Rio, silahkan kunjungi pembahasan lainnya pada alamat berikut : http://media-kreatif.com/home/post/74/membuat-pilihan-kota-otomatis-dengan-jquery-ajax-dan-php-mysql.prmposting pada :2013-11-30 12:00:23
wiraga bisa min... setelah saya klik salah satu provinsi (mis; jawa timur), kolom pilih kota tidak menampilkan isi yang sdh di tetapkan, melainkan kosong dan berubah bentuk menjadi kecil. kyk gini min = http://prntscr.com/2cm6g5 mohon tanggapannya min :)posting pada :2013-12-20 23:14:36
AdminSdr Wira, silahkan komentar Admin nomor 7 dari atas. Anda hanya perlu melakukan sedikit perubahan pada alamat url script prmajax.jsposting pada :2013-12-21 08:51:10
DWI WIJANARKOMakasih, mas Udah saya coba dan jika dipilih salah satu propinsi akan tampil data kota pada propinsi ybs.... Bravo..posting pada :2014-03-26 15:45:49
Andi AndraMisi mas, ikut [ ASK ] :D kalo yang include database gimana ya ?posting pada :2015-07-17 21:33:14
ghaniom admin, ini kok ga bisa, file prmajax.js jg udah saya rubah, hasilnya tetep ketika saya pilih nama provinsi,nama kotanya malah kosongposting pada :2015-08-31 08:52:03
udinom mau tanya gimana cara update jika ada combo box dinamis bertingkat dengan pilihan provinsi,kabupaten,kecamatan dengan jqeury / ajaxposting pada :2016-03-25 00:29:55
         
     
         
 
         
   
         
   
 

Tulis komentar