Sudah lama rasanya tidak update blog ini, maklum banyak yang dikerjakan he3. Maksud judul yang saya buat ini adalah pengalaman saya waktu ingin membuat form penghitungan. Biasanya untuk mengkalkulasi form kita harus menekan tombol (form.button) Submit. Yang saya inginkan adalah saya membikin 3 textfield masing-masing adalah sbb:
- Textfield 1 berisi harga barang per-unit
- Textfield 2 berisi diskon
- Textfield 3 berisi jumlah barang yang kita pesan
- Textfield 4 menampilkan hasil perhitungan
Begitu saya mengisikan angka pada jumlah barang yang dipesan, maka otomatis hasil perhitungan langsung muncul (seperti model ajax gitu-lah). Screenshotnya seperti ini
OK, langsung sharing skripnya ajah…..
Taruh skrip ini didalam <head>
<script type=”text/javascript”>
<!–
function startCalculate(){
interval=setInterval(“Calculate()”,10);
}
function Calculate(){
var a=document.form1.harga_perunit.value;
var b=document.form1.diskon.value;
var c=document.form1.jml_barang.value
document.form1.total.value=(a*c)-(a*c*(b/100));
}
function stopCalc(){
clearInterval(interval);
}
//–>
</script>
Kemudian siapkan tabel berifi form di <body>
<form id=”form1″ name=”form1″ method=”post” action=””>
<table width=”400″ border=”0″ cellpadding=”5″ cellspacing=”1″ bgcolor=”#333333″>
<tr>
<td width=”50%” bgcolor=”#FFFFFF”>Harga per unit </td>
<td bgcolor=”#FFFFFF”><input name=”harga_perunit” type=”text” id=”harga_perunit” style=”text-align:right” onfocus=”startCalculate()” onblur=”stopCalc()” value=”5000″ /></td>
</tr>
<tr>
<td bgcolor=”#FFFFFF”>Diskon</td>
<td bgcolor=”#FFFFFF”><input name=”diskon” type=”text” id=”diskon” size=”10″ onfocus=”startCalculate()” onblur=”stopCalc()”/>
%</td>
</tr>
<tr>
<td bgcolor=”#FFFFFF”>Jumlah barang </td>
<td bgcolor=”#FFFFFF”><input name=”jml_barang” type=”text” id=”jml_barang” size=”10″ onfocus=”startCalculate()” onblur=”stopCalc()”/></td>
</tr>
<tr>
<td bgcolor=”#FFFFFF”>Total dibayar </td>
<td bgcolor=”#FFFFFF”><input name=”total” type=”text” id=”total” style=”text-align:right” onfocus=”startCalculate()” onblur=”stopCalc()”/></td>
</tr>
</table>
</form>
Silahkan copas saja deh daripada ngeting ulang he3. Pengembangan skrip ini bisa luas misalnya digabung dengan database, misalnya harga dikaitkan dengan jenis barang yang tersimpan di database (seperti aplikasi kasir), atau data realtime seperti jumlah pengunjung yang masuk arena bermain, atau laporan keuangan.
