Recalculate each sum of each line when changing radio
Good day,
I have a dynamic table where you can add and remove a table when you click the X button, each row has a Current Qty field and an Adjusted Qty field, and a New Qty field that is displayed when you enter a number in the Adjusted Qty field, and that's it this works correctly, but I want to add functionality that will change every common Qty field base on the checked radio field above the table. For example, if you press the IN (radio button) the operation will be ADD and if you press the OUT (radio button) the operation will be MINUS and all lines should be affected by every "onchange" event of the switch, Can someone please help to me:)
HTML:
<div class="col-xs-12">
<div class="box">
<div class="box-body table-responsive">
<div id="records">
<div class="form-group">
<label for="departments">Department</label>
<select name="departments" id="">
@foreach($departments as $department)
<option value="{{$department->xid}}">{{$department->department}}</option>
@endforeach
</select>
</div>
<br>
<label for="radio">Adjustment Type</label>
<div class="radio">
<label><input type="radio" class="adjType" value="in" id="radioIn" name="optradio">Inventory In</label>
</div>
<div class="radio">
<label><input type="radio" class="adjType" value="out" id="radioOut" name="optradio">Inventory Out</label>
</div>
</div>
<label for="remarks">Remarks</label>
<input type="text" name="remarks" required id="memo" placeholder="Text input" class="form-control">
<br>
<table class="table table-condensed" id="adjustmentTable">
<thead>
<tr>
<th width="30%">Item</th>
<th width="10%">Qty on Hand</th>
<th width="10%">Adjusted Qty</th>
<th width="10%">new Qty</th>
<th width="10%">Current Cost</th>
<th width="10%">Adjusted Cost</th>
<th width="10%">Cost Diff</th>
<th width="10%">Expiration Date</th>
<th width="10%">Remove</th>
</tr>
</thead>
<tbody>
<tbody>
<tr>
<td>Item 1</td>
<td>20</td>
<td>10</td>
<td>30</td>
<td>10.40</td>
<td>12.00</td>
<td>.60</td>
<td>11/21/1016</td>
<td>X</td>
</tr>
<tr>
<td>Item 31</td>
<td>230</td>
<td>16</td>
<td>246</td>
<td>31.40</td>
<td>20.00</td>
<td>-11.40</td>
<td>11/21/1019</td>
<td>X</td>
</tr>
<tr>
<td>Item 6</td>
<td>12</td>
<td>19</td>
<td>31</td>
<td>22.40</td>
<td>30.00</td>
<td>7.60</td>
<td>11/21/1016</td>
<td>X</td>
</tr>
</tbody>
</tbody>
</table>
JS:
<script>
var $this = $(document);
$this.on("change",'input[name="optradio"]',function(){
var rowCount = $('#adjustmentTable tr').length - 1;
});
source to share
You need to create event handlers for the "change" event on these radio buttons. These event handlers will loop through all rows in your table and apply the AutoCalculateDifference function on each row. Something like that:
$("#radioIn, #radioOut").change(function() {
// The user clicked a radio button. Now loop through all the
// rows in the table. NOTE: You should be more specific with
// this jQuery selector to refer to the exact ID of the table.
$("table tr").each(function() {
autoCalculateDifferenceOnRow(this);
});
});
If you do this, you will need to reorganize your AutoCalculateDifference function a bit to be able to handle the input parameter representing the string, rather than always using "this". For example,
function autoCalculateDifferenceOnRow(currentRow) {
if(document.getElementById('radioIn').checked) {
var type = 1;
}else if(document.getElementById('radioOut').checked) {
var type = 0;
}
var $adjQty = $(currentRow).find('.adjQty');
var $newCost = $(currentRow).find('.newCost');
var $onHandQty = $(currentRow).find('p.onHandQty');
var $qtyDiff = $(currentRow).find('p.qtydiff');
var $currentCost = $(currentRow).find('p.currentCost');
var $costDiff = $(currentRow).find('p.costDiff');
// Update Quantity
var onHandQty = parseInt($onHandQty.text(),10);
if(type == 1)
{
var difference = onHandQty + parseInt($adjQty.val());
}
else if(type==0)
{
var difference = onHandQty - parseInt($adjQty.val());
}
$qtyDiff.text(difference);
// Update Cost
var currentCost = $currentCost.text();
var difference = $newCost.val() - currentCost;
$costDiff.text(difference);
}
I have not tested the above code, but hopefully it helps you move in the right direction.
source to share