Cara Menjumlahkan Otomatis Nilai dengan jQuery
Jika sahabat PHP ingin membuat scrip penjumlahan otomatis, maka caranya gunakan jQuery seperti di bawah ini.
1. Membuat file index.php
Baik, langkah pertama adalah membuat file index.php terlebih dahulu dan membuat beberapa form inputan untuk nilai – nilai yang akan nanti akan diinputkan. Silahkan kalian bisa mengetikan kode di bawah ini.
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mt-3">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<div class="form-group">
<input type="text" id="harga" class="form-control" placeholder="Harga Barang">
</div>
<div class="form-group">
<input type="text" id="jumlah" class="form-control" placeholder="Jumlah Barang">
</div>
<div class="form-group mb-0">
<input type="text" id="total" class="form-control" placeholder="Total" readonly="">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
2. Membuat Proses Perhitungan
Setelah membuat form inputan, langkah selanjutnya adalah membuat proses perhitungan dengan jQuery, dimana kita akan memanfaatkan fungsi keyup yang akan diberikan kepada inputannya. Silahkan kalian ketikan kode jQuery berikut ini.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#jumlah, #harga").keyup(function() {
var harga = $("#harga").val();
var jumlah = $("#jumlah").val();
var total = parseInt(harga) * parseInt(jumlah);
$("#total").val(total);
});
});
</script>
Video lengkapnya cek di sini