Imam Riyanto

Minggu, 05-09-2010

Untitled Document

Welcome Guest, Sign in here | Register

input artikel

Imam Riyanto

echo"$artikel[judul_artikel]";

Apr 2010

Tips Trik Seputar Form II (Kombinasi textfield, radio, list/menu/combo box dengan javascript)

By imam

Viewed :192

Setelah sebulan lebih tidak mengupdate artikel, sambil baca2 dapat ilmu baru ^_^ kali ini tidak jauh beda dengan artikel sebelumnya tentang Tips Trik Seputar Form (Textfield) namun kali ini saya mencoba menjelaskan bagian dari form tentang perpaduan antara textfield - radio dan 2 combobox/list/menu secara dinamis. Ok langsung saja kita coba membuatnya.... bismillaa hirrohmaa nirrohiim

1. Kombinasi Textfield dan Radio

Awal mula ide ini adalah ketika ingin membuat aplikasi tentang pembayaran kuliah semester mahasiswa , sebagaimana kita ketahui tidak semua mahasiswa mendapat subsidi/bantuan. Bagaimana caranya agar pada kolom (textfield), tertulis besar subsidi secara otomatis dengan memilih 2 pilihan (radio) :

1.Subsidi
2.Tanpa Subsidi

Apabila kita pilih (radio) subsidi, maka otomatis kolom (textfield) keluar besar nilai uang subsidi tsb. (besar uang subsidi bisa diatur pada script).
Dan sebaliknya jika kita memilih (radio) tanpa subsidi otomatis kolom (textfield) mengahasilkan angka '0'.

Berikut script dan demonya

Script : misal simpan dengan nama kombinasi1.html
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function sub()
{
if (document.xxx.subsidi)
{
document.getElementById('nilai').innerHTML = "<input type='text' name='besar_subsidi' value='250000'>";
}
}
function sub2()
{
if (document.xxx.subsidi)
{
document.getElementById('nilai').innerHTML = "<input type='text' name='besar_subsidi' value='0'>";
}
}
</script>

<title>Untitled Document</title>
</head>

<body>

<table width="438" border="0" cellspacing="0" cellpadding="0">
<form name="xxx" method="post" action="">
<tr>
<td width="152"><div id="nilai"><input type="text" name="besar_subsidi" style="color:#999999; font-style:italic" value="pilih tipe subsidi" onFocus="if(this.value=='pilih tipe subsidi'){this.value='';}" onBlur="if(this.value==''){this.value='pilih tipe subsidi';}"></div></td>
<td width="142"><input name="subsidi" type="radio" onFocus="sub()"> Dengan subsidi</td>
<td width="144"><input name="subsidi" type="radio" onFocus="sub2()"> Tanpa subsidi</td>
</tr>
</form>
</table>
</body>
</html>

Penjelasan :

Pada javascript diatas (warna biru langit) pada bagian
if (document.xxx.subsidi)
'xxx' = adalah nama form
'subsidi' = adalah nama radio, pada bagian ini kita memanggil fungsi dengan javascript, yaitu fungsi sub() atau sub2().

document.getElementById('nilai').innerHTML = "<input type='text' name='besar_subsidi' value='250000'>";
'nilai'=adalah id dari tag <div>,
Lihat bagian <div id="nilai"><input type="text" name="besar_subsidi" ........

Berikut demonya :

Dengan subsidi Tanpa subsidi

2. Kombinasi 2 List/Menu/Combo Box

Misal kita punya 2 combo box , 1 berisi nama benua, dan 1 lagi nama negara. Jika kita memilih salah satu benua maka otomatis hanya nama negara yang berada dibenua tersebut yang muncul, triknya hampir mirip dengan trik yang diatas sebelumnya. Namun di artikel ini saya memberi contoh tentang nama kota dan nama kecamatan di daerah tsb. berikut script dan demonya
Script : kombinasi2.html
<html>
<head>

<title>Combo Box</title>
</head>

<body>
<script language="JavaScript" type="text/JavaScript">

function Daerah()
{
if (document.xxx.kota.value == "surabaya")
{
document.getElementById('tempat').innerHTML = "<select><option>Rungkut</option><option>Gunung Anyar</option><option>Kendang Sari</option></select>";
}
if (document.xxx.kota.value == "bandung")
{
document.getElementById('tempat').innerHTML = "<select><option>Banjaran</option><option>Baleendah</option></select>";
}
if (document.xxx.kota.value == "-----")
{
document.getElementById('tempat').innerHTML = "pilih kota terlebih dahulu";
}
}

</script>
<table width="480" border="0" cellspacing="0" cellpadding="0">
<form name="xxx" method="post" action="">
<tr>
<td width="68">Kota</td>
<td width="376"><select name="kota" onchange="Daerah()">
<option value='-----'>-----</option>
<option value='surabaya'>Surabaya</option>
<option value='bandung'>Bandung</option>
</select></td>
<td width="36"> </td>
</tr>
<tr>
<td>Daerah</td>
<td><div id="tempat">pilih kota terlebih dahulu</div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr></form>
</table>
</body>
</html>

Demo :

Kota

Daerah
pilih kota terlebih dahulu

Share on Facebook

Komentar Pembaca (0 komentar)

Previous - Next

Untitled Document Imam Riyanto

Jejak si gundul

38.107.191.83 tgl 05-09-2010 jam 05:24

38.107.191.82 tgl 05-09-2010 jam 05:23

202.70.54.164 tgl 05-09-2010 jam 04:45

218.213.131.3 tgl 05-09-2010 jam 03:48

88.131.106.22 tgl 05-09-2010 jam 03:31

66.249.68.217 tgl 05-09-2010 jam 02:56

66.249.68.217 tgl 05-09-2010 jam 02:21

110.137.250.61 tgl 05-09-2010 jam 01:41

202.70.54.85 tgl 05-09-2010 jam 01:35

208.80.194.33 tgl 05-09-2010 jam 01:16

Statistik
Agama	: 10 artikel
Belajar	: 16 artikel
Humor	: 4 artikel
Info	: 13 artikel
Other	: 3 artikel

Who's online

Imam Riyanto
Guest OL	: 2
Hari ini	: 12
Dikunjungi	: 15735

Komentar
	eenk on Script sistem untuk login menggunakan PHP dan MySQL
	cuk on Bismillah
	lofitra on Kalender script PHP
	admin on POLLING SEDERHANA dengan PHP MySQL
	Lola on POLLING SEDERHANA dengan PHP MySQL
	joel on Cara Download di Youtube
	ztsdtsdtz on Submit Form dengan Ajax, PHP & MySQL
	admin on POLLING SEDERHANA dengan PHP MySQL
	selvia on POLLING SEDERHANA dengan PHP MySQL
	admin on POLLING SEDERHANA dengan PHP MySQL