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

2:11:00 AM

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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Koding Sederhana CIWER.ID</title>
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript --><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>
<!-- Dan seterusnya -->
<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/>
<!-- Dan seterusnya -->
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

Artikel Terkait

Previous
Next Post »