-
3
Mar
Mungkin sebagian dari kita ingin mengetahui bagaimanakah caranya untuk membuat combo box / drop-down select Propinsi – Kabupaten yang dinamis, agar pengunjung yang ingin menginput data pada form field alamat dapat dengan mudah menginput data alamat provinsi dan kabupaten tempat tinggal mereka, seperti gambar dibawah ini.
Berikut ini akan kita uraikan 2 (dua) cara untuk membuat form drop-down provinsi dan kabupaten dinamis dengan Javascript XHTML atau dengan Javascript PHP:
Pertama-tama kita buat terlebih dahulu sebuah database city dan setelah itu kita siapkan tabel-tabel yang diperlukan.
1. Tabel propinsi dengan struktur sebagai berikut :
– id
– nama
2. tabel kabupaten dengan struktur sebagai berikut:
– id
– prop_id
– nama
Setelah selesai maka mari kita buat file yang berisikan script-script yang dibutuhkan, seperti dibawah ini.
1. Dengan Javascript – XHTML
– city.js berisikan file javascript xhtml.
function rubah(pilih) {
if(window.XMLHttpRequest)
{
http=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
http=new ActiveXObject("Microsoft.XMLHTTP");
}
var idPropinsi = pilih.value;
var url = "kabupaten.php?idPropinsi="+idPropinsi;
//alert(url);
//mlsaddress=address;
http.open("GET", url , true);
http.onreadystatechange = countryprocess;
http.send();
//==jai
}
function countryprocess()
{
if (http.readyState == 4) {
// Split the comma delimited response into an array
if(http.status==200)
{
var message1 = "
<select style="font-family: Arial; font-size: 11px;" name="kab"> </select>
";
var message3 = http.responseText;
document.getElementById("kabupaten").innerHTML = message1 + message3 + message2;
//alert( http.responseText )
if(http.responseText!="No values")
{
var clist=http.responseText.split("_");
for(i=0;i
{
var myclist=clist[i].split(",");
document.getElementById("kabupaten").options[i+1]=new Option(myclist[1],myclist[0]);
}
}
}
}
– config.php berisikan konfigurasi koneksi ke databases.
<?php
$host = "localhost";
$db_user = "root";
$db_passwd = "12345";
$db_name = "city";
$id_mysql = mysql_pconnect ($host, $db_user, $db_passwd);
if (! $id_mysql)
echo "Database No Connected<br>SQL Error: ". mysql_error();
if(! mysql_select_db ("$db_name", $id_mysql))
echo "Database No Selected<br>SQL Error: ". mysql_error();
?>
– index.php berisikan form field input data.
<?php
require "config.php";
?>
<html>
<head>
<script type="text/javascript" src="city.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Drop Down Propinsi</title>
<style type="text/css">
<!--
.style1 {
font-size: 18px;
color: #330066;
}
-->
</style>
</head>
<body>
<table border="0" width="463" id="table_prop" style="font-family: Arial; font-size: 11px">
<tr>
<td align="left" colspan="3"><span>Propinsi dan Kabupaten
<br>
</span></td>
</tr>
<tr>
<td align="left">
<font style="font-family: Arial; font-size: 11px"> Propinsi<font color="#FF0000"><br>
</font></font></td>
<td width="6" align="left"><font style="font-family: Arial; font-size: 11px">: </font> </td>
<td width="214" align="left">
<select name="propinsi" id="propinsi" onChange="javascript:rubah(this)" style="font-family:Arial; font-size:11px">
<option value=''>Pilih Provinsi</option>
<?php
$sql = mysql_query ("SELECT * FROM wp_propinsi order by nama ",
$id_mysql);
while ($prop = mysql_fetch_array ($sql)) {
echo "<option value=$prop[id] >$prop[nama]</option>";
}
?>
</select></td>
</tr>
<tr>
<td align="left">
<font style="font-family: Arial; font-size: 11px"> Kabupaten/Kotamadya
<font color="#FF0000"><br> </font></font>
</td>
<td width="6" align="left"><font style="font-family: Arial; font-size: 11px">:<br> </font>
</td>
<td width="274" align="left">
<div style="font-family:Arial; font-size:11px"></div>
</td>
</tr>
</table>
</body>
</html>
– kabupaten.php berisikan form field option select kabupaten.
<?php
// mengkoneksikan ke server MySQL
require "config.php";
$idPropinsi = $_GET['idPropinsi'];
//query pemiliki id propinsi yang sama
$sql_kab = mysql_query ("SELECT * FROM wp_kabupaten WHERE prop_id = '$idPropinsi' order by nama ",
$id_mysql);
while ($kab = mysql_fetch_array ($sql_kab)) {
echo "<option value=$kab[id]>$kab[nama]</option>";
}
?>
2. Dengan Javascript – PHP
– config.php berisikan konfigurasi koneksi ke databases.
<?php
$host = "localhost";
$db_user = "root";
$db_passwd = "12345";
$db_name = "city";
$id_mysql = mysql_pconnect ($host, $db_user, $db_passwd);
if (! $id_mysql)
echo "Database No Connected<br>SQL Error: ". mysql_error();
if(! mysql_select_db ("$db_name", $id_mysql))
echo "Database No Selected<br>SQL Error: ". mysql_error();
?>
– index.php berisikan form field input data.
<?php
require "config.php";
?>
<html>
<head>
<script>
function rubah()
{
<?php
echo"if (document.order.propinsi.value == \"\")";
echo "{";
$content = "document.getElementById('kabupaten').innerHTML = \"<select name='kab' style='font-family:Arial; font-size:11px'>";
$content .= "<option value=''>Harap Pilih Provinsi</option>";
$content .= "</select>\";";
echo $content;
// Baca semua propinsi
$db_propinsi = mysql_query ("SELECT * FROM wp_propinsi order by nama ",
$id_mysql);
while ($db_propinsis = mysql_fetch_array ($db_propinsi))
// Pilihan propinsi beserta isi option untuk combobox kedua
{
$idProp = $db_propinsis['id'];
// Membuat logica masing-masing propinsi
echo "if (document.order.propinsi.value == \"".$idProp."\")";
echo "{";
// membuat option kabupaten untuk masing-masing propinsi
$db_kabupaten = mysql_query ("SELECT * FROM wp_kabupaten WHERE prop_id = $idProp order by nama");
$content = "document.getElementById('kabupaten').innerHTML = \"<select name='kab' style='font-family:Arial; font-size:11px'>";
//$content = "document.getElementById('kabupaten').innerHTML = \"";
while ($db_kabupatens = mysql_fetch_array ($db_kabupaten))
{
$content .= "<option value='".$db_kabupatens['id']."'>".$db_kabupatens['nama']."</option>";
}
$content .= "</select>\";";
// $content .= "\"";
echo $content;
}
?>
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Drop Down Propinsi</title>
<style type="text/css">
<!--
.style1 {
font-size: 18px;
color: #330066;
}
-->
</style>
</head>
<body>
<form id="formID" method="post" name="order" action="order.php?tab=order">
<table border="0" width="463" id="table_prop" style="font-family: Arial; font-size: 11px">
<tr>
<td align="left" colspan="3"><span>Propinsi dan Kabupaten
<br>
</span></td>
</tr>
<tr>
<td align="left">
<font style="font-family: Arial; font-size: 11px"> Propinsi<font color="#FF0000"><br>
</font></font></td>
<td width="6" align="left"><font style="font-family: Arial; font-size: 11px">: </font> </td>
<td width="214" align="left">
<select name="propinsi" id="propinsi" onChange="javascript: rubah(this)" style="font-family:Arial; font-size:11px">
<option value=''>Pilih Provinsi</option>
<?php
$sql = mysql_query ("SELECT * FROM wp_propinsi order by nama ",
$id_mysql);
while ($prop = mysql_fetch_array ($sql)) {
echo "<option value=$prop[id] >$prop[nama]</option>";
}
?>
</select></td>
</tr>
<tr>
<td align="left">
<font style="font-family: Arial; font-size: 11px"> Kabupaten/Kotamadya
<font color="#FF0000"><br> </font></font>
</td>
<td width="6" align="left"><font style="font-family: Arial; font-size: 11px">:<br> </font>
</td>
<td width="274" align="left">
<div style="font-family:Arial; font-size:11px">
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
- Published by admin in: Web Programing
- If you like this blog please take a second from your precious time and subscribe to my rss feed!
