Calculate sum value jQuery PHP - php

Question

I have a problem calculating the sum of the data from the database and from user input, can Y'all help me?
this is the PHP code
1st value (stok di database) is data from database, and 2nd value (stok fisik) is data from user input, and selisih is 2nd value - 1st value.
<div class="box-content nopadding" style="overflow: auto;">
<table width="400px" class="table table-hover table-nomargin table-bordered">
<thead>
<tr>
<th style="text-align: center; vertical-align:middle;" rowspan="2">No</th>
<th style="text-align: center; vertical-align:middle;" rowspan="2">Nama Barang</th>
<th style="text-align: center; vertical-align:middle;" colspan="2">Stok</th>
<th style="text-align: center; vertical-align:middle;" rowspan="2">Selisih</th>
</tr>
<tr>
<th style="text-align: center; vertical-align:middle;">Stok di Database</th>
<th style="text-align: center; vertical-align:middle;">Stok Fisik</th>
</tr>
</thead>
<tbody>
<?php
$data = $db->query("select id, nama_barang, stock from tbl_atk group by nama_barang");
for ($i = 0; $i < count($data); $i++) {
$no = $i + 1;
if ($no % 2 ==0) $bg ='#FBFBFB';
else $bg = '#FFFFFF';
// $total = 'result' - $data[$i]['stock'];
$tot_masuk = $tot_masuk + "stock_op";
$tot_keluar = $tot_keluar + $data[$i]['stock'];
$grand_tot = $tot_masuk - $tot_keluar;
?>
<tr>
<td style="text-align: center; vertical-align:middle;"><?php echo $no; ?></td>
<td><?php echo $data[$i]['nama_barang']?></td>
<td style="text-align: right;" class="so"><?php echo $data[$i]['stock']; ?></td>
<td><input type="number" class="form-control so" id="stock_op" name="stock_op" style="text-align: left"></td>
<td style="text-align: right; font-weight:bold;"><output class="result"></output></td>
</tr>
<?php
}
?>
<script src="../js/jquery.min.js"></script>
<script>
$(document).on('input','.so',function(){
var totalSum = 0;
var currentRow = $(this).closest('tr');
currentRow.find('.so').each(function(){
var inputVal = ($(this).is('input')) ? $(this).val() : parseInt($(this).html());
console.log(inputVal);
if($.isNumeric(inputVal)){
totalSum += parseFloat(inputVal);
}
});
currentRow.find('.result').val(totalSum);
});
</script>
<tr style="background-color:#eaeaea; font-weight:bold;">
<td style="text-align: center; vertical-align:middle;"></td>
<td style="text-align: right;">Selisih</td>
<td style="text-align: right;"><?php echo $tot_keluar; ?></td>
<td style="text-align: right;"><?php echo $tot_masuk; ?></td>
<td style="text-align: right;"><?php echo $grand_tot; ?></td>
</tr>
</tbody>
</table>
</div>
and this is the User Interface

Answer 1

Change the .so to so in the below input fields.
<td style="text-align: right;" class="form-control .so"><?php echo $data[$i]['stock']; ?></td>
<td><input type="number" class="form-control .so" id="stock_op" name="stock_op" style="text-align: left"></td>
Change id result to class result in below line
<td style="text-align: right; font-weight:bold;"><output id="result"></output></td>
New Update
Give a specific class to your stok fisik cell
<tr style="background-color:#eaeaea; font-weight:bold;">
<td style="text-align: center; vertical-align:middle;"></td>
<td style="text-align: right;">Selisih</td>
<td style="text-align: right;"><?php echo $tot_keluar; ?></td>
<td class="grandResult" style="text-align: right;"><?php echo $tot_masuk; ?></td>
<td style="text-align: right;"><?php echo $grand_tot; ?></td>
</tr>
change your jquery code to this
$(document).on('input','.so',function(){
var grandSum = 0;
var totalSum = 0;
var currentRow = $(this).closest('tr');
currentRow.find('.so').each(function(){
var inputVal = ($(this).is('input')) ? $(this).val() : parseInt($(this).html());
if($.isNumeric(inputVal)){
totalSum += parseFloat(inputVal);
}
});
currentRow.find('.result').val(totalSum);
$('input.so').each(function(){
var cVal = ($(this).is('input')) ? $(this).val() : parseInt($(this).html());
if($.isNumeric(cVal)){
grandSum += parseFloat(cVal);
}
});
$('.grandResult').val(grandSum);
});

Answer 2

Hello Fauzio, I have created a sample table with 3 columns,
1. t_id (ie. id )
2. t_name ( ie name barang)
3. t_value (ie stock di database)
I created a table and displayed the values of each rows in the table. all values from column t_value is added in java script array. then as user enters the value for that particular row.
On click of the button , the value for that particular row is picked from db_column and user column and the result is printed in the result column
<?php
$sql = "SELECT t_id,t_name, t_value FROM test_table";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
$main_array = array();
$count=0;
while($row = $result->fetch_assoc()) {?>
<tr>
<td class="no">
<?php echo $count;?>
</td>
<td class="name">
<?php echo $row["t_name"]."<br>";?>
</td>
<td class="db_value">
<?php
array_push($main_array,$row["t_value"]);
echo $row["t_value"]."<br>";?>
</td>
<td class="user_value">
<form method="post">
<input type="number" value="">
<button id="cal" type="button" class="<?php echo $count;?>"> Calculate </button>
</form>
</td>
<td class="result">
<input type="tel" name="" value="" id="result_<?php echo $count;?>">
</td>
</tr>
<?php $count++;}?>
</tbody>
</table>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
var main_array = new Array();
<?php foreach($main_array as $key => $val){ ?>
main_array.push('<?php echo $val; ?>');
<?php } ?>
jQuery('#cal').on('click', function() {
id = jQuery(this).attr('class');
value_1st = main_array[id];
value_2nd = jQuery(jQuery(this).closest('.user_value')).find('input[type="number"]').val();
result = value_1st + value_2nd;
input_field = jQuery(jQuery(jQuery(this).closest('.user_value')).next()).find('#result_' + id);
input_field.val(result);
});
});
</script>