Cara membuat penambahan dan pengurangan secara otomatis dengan JQuery |PHP dan HTML

Cara membuat penambahan dan pengurangan secara otomatis dengan JQuery |PHP dan HTML-ciwer.id kesempatan kali ini saya akn share program sederhana untuk melakukan proses penmbhan dan pengurangan secara otomatis di PHP dan HTML menggunkan jquery.

lasung saja sobat.
berikut ini ini adalah script text javascript

<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>

script di atas berfungsi untuk melakukan proses hitung penambahan dan pengurangan otomatis.
untuk script lengkpanya bisa lihat di bawah ini.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">



<title>Koding Sederhana CIWER.ID</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<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>

<div class="container">

<div class="jumbotron col-md-8">

<div class="panel panel-primary ">

<div class="panel-heading">

<h3 class="panel-title">

CIWER.ID |Penambahan Dan Pengurangan Otomatis Dengan Jquery</h3>

</div>

<div class="panel-body">

<div class="col-md-4">

<input type="text" class="form-control" name="Ajumlah1" placeholder="masukkan angka" rel="Ajumlah"/><br/>

<input type="text" class="form-control" name="Ajumlah2" placeholder="masukkan angka" rel="Ajumlah"/><br/>

<input type="text" class="form-control" name="Ajumlah3" placeholder="masukkan angka" rel="Ajumlah"/><br/>

<input type="text" class="form-control" name="Ajumlah4" placeholder="masukkan angka" rel="Ajumlah"/><br/>

<input type="text" class="form-control" name="Ajumlah5" placeholder="masukkan angka" rel="Ajumlah"/><br/>

<input type="text" class="form-control" name="Ajumlah6" placeholder="masukkan angka" rel="Ajumlah"/><br/>

Total A: <input type="text" class="form-control" name="Atotal" placeholder="Hasil Dari Penambahan" id="Atotal"/><br/><br/>

</div>



<div class="col-md-4">

<input type="text" class="form-control" placeholder="masukkan angka" name="Bjumlah1" rel="Bjumlah"/><br/>

<input type="text" class="form-control" placeholder="masukkan angka" name="Bjumlah2" rel="Bjumlah"/><br/>

<input type="text" class="form-control" placeholder="masukkan angka" name="Bjumlah3" rel="Bjumlah"/><br/>

<input type="text" class="form-control" placeholder="masukkan angka" name="Bjumlah4" rel="Bjumlah"/><br/><br/>



Total B: <input type="text" class="form-control" name="Btotal" placeholder="Hasil dari Penambahan" id="Btotal"/><br/><br/>

Selisih: <input type="text" class="form-control" name="selisih" placeholder="Hasil dari A-B" id="selisih"/><br/><br/><br/>

</div>

</div>

</body>

</html>

simpan dengan nama index.php atau sesuka anda.,sebelumnya anda menjalan kan program tersebut sobat harus mendownload jquery terlebih dahulu .
Download Jquery.
Setelah di download letakan jquery bersandingan dengan file index.php yang telah di buat.

ok sobat sekian,semoga ini bermanfaat.

Lihat juga ke sini

CIWER.ID

Kamis, 09 Juni 2016

Cara membuat penambahan dan pengurangan secara otomatis dengan JQuery |PHP dan HTML