Tutorial Cara Membuat Penjumlahan Otomatis di Textbox dengan Jquery ini merupakan tutorial kelanjutan dari artikel Menampilkan Hasil Penjumlahan Textbox otomatis dg Jquery , yang artikel tersebut dirasa kurang jelas, kali ini admin akan membagikan script untuk melakukan penjumlahan pengurangan pembagian maupun perkalian dengan contoh yang mudah..

Cara Membuat Penjumlahan Otomatis di Textbox

Ini sangat sering ada jika kita membuat aplikasi, dimana kita harus menjumlahkan data secara otomatis dan data tersebut langsung tampil / ada di dalam textbox atau komponen yang di inginkan

Berikut contoh membuat penjumlahan otomatis di textbox dengan 2 event

1. Event Onchange

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function hitung() {
    var a = $(".a").val();
    var b = $(".b").val();
    c = a * b; //a kali b
    $(".c").val(c);
}
</script>
<p>
<b>Suckittrees.com Onchange</b>
<br/>
A :
<input class="a" name="A" onchange="hitung();" type="text" value=1 />
<br>B :
<input class="b" name="B" onchange="hitung();" type="text" value=3 />
<br>C :
<input class="c" name="C" type="text" readonly />
</p>

2 . Even Keyup

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function hitung2() {
    var a = $(".a2").val();
    var b = $(".b2").val();
    c = a * b; //a kali b
    $(".c2").val(c);
}
</script>
<p>
<b>Suckittrees.com Keyup</b>
<br/>
A :
<input class="a2" name="A" onkeyup="hitung2();" type="text" value=1 />
<br>B :
<input class="b2" name="B" onkeyup="hitung2();" type="text" value=3 />
<br>C :
<input class="c2" name="C" type="text" readonly />
</p>