I am trying to set up a table with 3 columns. One column, total_column_price, is intended to display the calculation result of amount and device_price. How can I achieve this?
The Table
{{ Form::open(['action' => 'TransactionsINController@store', 'method' => 'POST']) }}
<table class="table table-hover table-bordered">
<thead align="center">
<tr>
<th>Amount</th>
<th>Device Price</th>
<th><a href="#" class="btn btn-primary btn-sm addRow">
<i class="fa fa-plus"></i>
</a>
</th>
<th>Column Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-group">
{{ Form::number('amount[]', 'value', ['name' => 'amount[]']) }}
</div>
</td>
<td>
<div class="form-group">
{{ Form::number('device_price[]', 'value', ['name' => 'device_price[]']) }}
</div>
</td>
<td align="center">
<a href="#" class="btn btn-danger btn-sm remove">
<i class="fa fa-times"></i>
</a>
</td>
<td>
{{ Form::text('total_column_price', '') }}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total: </td>
<td style="border: none"><b class="total_price"></b></td>
<td style="border: none"></td>
</tr>
</tfoot>
</table>
{{ Form::button('<i class="far fa-save"></i> Submit', ['type' => 'submit', 'class' => 'btn btn-info'] ) }}
{{ Form::close() }}
This setup involves a calculation where input in the amount and device_price columns will automatically update the value displayed in the total_column_price column.
The Script for Calculation
<script type="text/javascript">
$('tbody').delegate('.amount,.device_price','keyup',function(){
var tr=$(this).parent().parent();
var amount=tr.find('.amount').val();
var device_price=tr.find('.device_price').val();
var total_column_price=(amount*device_price);
tr.find(.total_column_price).val(total_column_price);
total_price();
});
function total_price(){
var total_price=0;
$('.total_column_price').each(function(i,e){
var total_column_price=$(this).val()-0;
total_price +=total_column_price;
});
$('.total_price').html(total_price+",00");
}
</script>