Biasanya auto calculation ini digunakan pada perhitungan pada sebuah form aplikasi.
Cara ini digunakan agar perhitungan yang dilakukan tidak perlu harus submit form terlebih dahulu.
Hal ini bisa terjadi dengan menggunakan event pada mouse seperti Onkeypress, onkeydown, onChange dan sebagainya.
Sebagai contoh dapat kita lihat di bawah ini.
Dalam hal ini kita akan membuat 2 fungsi javascript dimana fungsi yang pertama untuk filter input yang hanya berupa angka saja yang dapat diterima.
function onlyNumber(evt) {
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
((evt.which) ? evt.which : 0));
if (charCode == 45 || charCode == 40 || charCode == 41)
{ return true; }
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
alert(‘enter with number !’);
return false;
}
return true;
}
Fungsi yang kedua adalah untuk perhitungan secara otomatis.
function autototal(strFieldName, numFields)
{
total = document.form1.total.value;
if(isNaN(eval(‘document.form1.’ + strFieldName + ‘.value’)))
{
var f=confirm(“Please enter a valid number for all size fields”);
if(f==true)
{
return true;
}
else
{
return false;
}
}
intCustomerIndex = strFieldName.substring(8,9);
totalvalue = 0;
totalvalue = totalvalue + parseFloat(eval(‘document.form1.field1’ + ‘.value’),10)
+ parseFloat(eval(‘document.form1.field2’ + ‘.value’),10);
document.form1.total.value = totalvalue;
}
Fungsi javascript diletakkan di bagian head.
Nah sekarang kita buatkan 3 field dalam sebuah form untuk dapat melihat hasilnya. Dua field digunakan sebagai inputan dan satu field untuk hasil menunjukkan hasil.
Berdasarkan fungsi javascript di atas, field yang pertama dan kedua diberi nama field1 dan field2, sedangkan untuk hasilnya diberi nama total.
<form name=”form1″ method=”post”>
<input type=”text” name=”field1″ size=”8″ maxlength=”7″ value=”0″ onkeypress=”return onlyNumber(event);” onBlur=”javascript:autototal(this.name,10)”> + <input type=”text” name=”field2″ size=”8″ maxlength=”7″ value=”0″ onkeypress=”return onlyNumber(event);” onBlur=”javascript:autototal(this.name,10)”> = <input type=”text” name=”total” readonly>
</form>
Dari tag html di atas kita melihat ada 2 event mouse dimana yang pertama menggunakan onkeypress yang berguna untuk filter input khusus angka. Event mouse yang kedua menggunakan onblur yang berguna menghitung secara otomatis. Terdapat ‘autototal’ sesuai dengan nama fungsi javacript yang dibuat.
Mudah bukan?
Untuk demo dapat dilihat disini.
Kunjungi www.proweb.co.id untuk menambah wawasan anda.