Penjumlahan Pengurangan Otomatis Jquery-PHP - Penjumlahan Pengurangan di pemrograman berbasis Dekstop misalnya di Visual Basic dan Java pastinya sangat mudah membuatnya dan biasa. Tapi kali ini saya Program TA mencoba memberikan tutorial PHP dan jQuery bagaimana menghitung otomatis ketika input di form otomatis terhitung atau kata simplenya otomatis menjumlahkan tanpa klik tombol proses PHP-jQuery atau mengurangkan otomatis tanpa menekan tombol proses PHP-jQuery.
Kode jQuery untuk pengurangan dan jQuery penjumlahan pada file PHP seperti ini :
<script type="text/javascript" src="jquery.js"></script><script language='JavaScript'>$(document).ready(function(){var inpA = "input[rel=Ajumlah]";var inpB = "input[rel=Bjumlah]";$(inpA).bind('keyup',function() {var avalA=0;var bVal = parseInt($('#Btotal').val(),10);$(inpA).each(function() {if(this.value !='') avalA += parseInt(this.value,10);});$('#Atotal').val(avalA);$('#selisih').val(avalA - bVal);console.log('Value avalA: ' + avalA);});$(inpB).bind('keyup',function() {var avalB=0;var aVal = parseInt($('#Atotal').val(),10);$(inpB).each(function() {if(this.value !='') avalB += parseInt(this.value,10);});$('#Btotal').val(avalB);$('#selisih').val(aVal - avalB);console.log('Value avalB: ' + avalB);});});</script>
Oke lansung aja Gan...
Pertama Kita siapkan Halaman Index.php dengan kode berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pengurangan dan Penjumlahan Otomatis</title>
<script type="text/javascript" src="jquery.js"></script>
<script language='JavaScript'>
$(document).ready(function(){
var inpA = "input[rel=Ajumlah]";
var inpB = "input[rel=Bjumlah]";
$(inpA).bind('keyup',function() {
var avalA=0;
var bVal = parseInt($('#Btotal').val(),10);
$(inpA).each(function() {
if(this.value !='') avalA += parseInt(this.value,10);
});
$('#Atotal').val(avalA);
$('#selisih').val(avalA - bVal);
console.log('Value avalA: ' + avalA);
});
$(inpB).bind('keyup',function() {
var avalB=0;
var aVal = parseInt($('#Atotal').val(),10);
$(inpB).each(function() {
if(this.value !='') avalB += parseInt(this.value,10);
});
$('#Btotal').val(avalB);
$('#selisih').val(aVal - avalB);
console.log('Value avalB: ' + avalB);
});
});
</script>
</head>
<body>
input type="text" name="Ajumlah1" rel="Ajumlah"/><br/>
<input type="text" name="Ajumlah2" rel="Ajumlah"/><br/>
<input type="text" name="Ajumlah3" rel="Ajumlah"/><br/>
<input type="text" name="Ajumlah4" rel="Ajumlah"/><br/>
<input type="text" name="Ajumlah5" rel="Ajumlah"/><br/>
<input type="text" name="Ajumlah6" rel="Ajumlah"/><br/><br/>
<!-- Dan seterusnya -->
Total A: <input type="text" name="Atotal" id="Atotal"/><br/><br/>
<input type="text" name="Bjumlah1" rel="Bjumlah"/><br/>
<input type="text" name="Bjumlah2" rel="Bjumlah"/><br/>
<input type="text" name="Bjumlah3" rel="Bjumlah"/><br/>
<input type="text" name="Bjumlah4" rel="Bjumlah"/><br/><br/>
<!-- Dan seterusnya -->
Total B: <input type="text" name="Btotal" id="Btotal"/><br/><br/>
Selisih: <input type="text" name="selisih" id="selisih"/><br/><br/><br/>
</body>
</html>
Dan kedua kita siapkan file jQuery nya silahkan di download sini
Setelah dibuat file index.php dan mendowload file jQuery nya letakkan kedua file tersebut dalam satu folder lalu coba jalankan di browser anda.
Post a Comment