Reputation: 27
Here i have some some form group with values from database
<div class="form-group">
<label for="exampleInputTotalBayar">Total Bayar</label>
<input type="text" class="form-control" id="inputTotalBayar" placeholder="Total Bayar" name="totalBayar" value="{{ $peminjaman->totalBayar }}">
</div>
<div class="form-group">
<label for="exampleInputJumlahBayar">Jumlah Bayar</label>
<input type="text" class="form-control" id="inputJumlahBayar" onchange="" placeholder="Jumlah Bayar" name="jumlahBayar" value="{{ $peminjaman->jml_bayar }}">
</div>
Then i want to give new values in this form
<div class="form-group">
<label for="exampleInputDenda">Denda</label>
<input type="text" class="form-control" id="exampleInputDenda" placeholder="Denda" name="denda" value="{{ $peminjaman->denda }}">
</div>
so, when i give new values in form group Denda, the output will be show in here
<p>Bayar Pengembalian: <div id="bayar" name="bayar"></div></p>
My code for javascript was like this
<script type="text/javascript">
var bayar = parseInt("0");
var totalBayar = parseInt($("#inputTotalBayar").val());
var jumlahBayar = parseInt($("#inputJumlahBayar").val());
var denda = parseInt($("#exampleInputDenda").val());
$("#exampleInputDenda").change(function() {
bayar = bayar + denda + totalBayar - jumlahBayar;
$("#bayar").html(bayar);
});
but the calculation result doesn't appear, can you help me to solve this problem?
Upvotes: 0
Views: 399
Reputation: 11869
see this with slide change of your code:
$(document).ready(function(){
$("#exampleInputDenda").change(function(){
getValues();
});
// when using click event on button
$("#me").click(function(){
getValues();
});
});
function getValues(){
var bayar = parseInt("0");
var totalBayar = parseInt($("#inputTotalBayar").val());
var jumlahBayar = parseInt($("#inputJumlahBayar").val());
var denda = parseInt($("#exampleInputDenda").val());
bayar = bayar + denda + totalBayar - jumlahBayar;
$("#bayar").html(bayar);
}
</script>
to see on click use this:
<button id="me" onclick='getValues()'>Click me!</button>
Upvotes: 0
Reputation: 3310
You have to use
$("#exampleInputDenda").keyup(function() {
var bayar = parseInt("0");
var totalBayar = isNaN($("#inputTotalBayar").val()) ? 0 : parseInt($("#inputTotalBayar").val());
var jumlahBayar = isNaN($("#inputJumlahBayar").val()) ? 0 : parseInt($("#inputJumlahBayar").val());
var denda = isNaN($("#exampleInputDenda").val()) ? 0 : parseInt($("#exampleInputDenda").val());
bayar = bayar + denda + totalBayar - jumlahBayar;
$("#bayar").html(bayar);
});
Error checking :)
Upvotes: 2
Reputation: 9886
Just change you event handler so you can get the values when the actual event happen like so - JSFiddle example
$("#exampleInputDenda").change(function() {
var bayar = parseInt("0");
var totalBayar = parseInt($("#inputTotalBayar").val());
var jumlahBayar = parseInt($("#inputJumlahBayar").val());
var denda = parseInt($("#exampleInputDenda").val());
var res = bayar + denda + totalBayar - jumlahBayar;
$("#bayar").html(res);
});
P.S
Andd click Enter
to actually see the new value!
Upvotes: 0