php - Cannot display correct position for display realtime calculate result use javascript
Get the solution ↓↓↓now im doing laravel project that have function calculate realtime result use javascript.
im following this link Cannot get realtime calculate result use javascript in foreach condition
the calculate result is correct but not the position. i explain with image gif for more understand
if you see. at first. when i input 100. the second row display 100.00 that replace the<input>
code on "discount(%)" columns. this is not correct.. 100.00 should display on "total" columns..
but different with the second and third rows. input price and discount. it will display result on "total" row. that condition is correct.
Datas is usingforeach()
code. the problem is only for first row on each name. the second row and the rest is correct display.
here is the code
<table class="table table-bordered" width="100%">
<thead>
<tr>
<th class="text-center align-middle" width="10%">Name</th>
<th class="text-center align-middle" width="10%">Item</th>
<th class="text-center align-middle" width="10%">Price</th>
<th class="text-center align-middle" width="10%">Discount (%)</th>
<th class="text-center align-middle" width="10%">Total</th>
</tr>
</thead>
<tbody>
@foreach ($datas as $data)
@php
$countitems = count($data->items);
@endphp
<tr>
<td rowspan="{{$countitems}}"> {{$record->name}} </td>
@foreach ($data->items as $key => $items)
@if ($key == 0)
<td class="text-center" width="10%">{{ $items->name }} </td>
<td class="text-center" width="10%"> <input class='price' type="number" name="price[$data->id][$key]" > </td>
<td class="text-center" width="10%"> <input class='discount' type="number" name="discount[$data->id][$key]" > </td>
<td class="text-center" width="10%"> </td>
@endif
@endforeach
</tr>
@for ($i = 1; $i < $countitems; $i++)
<tr>
@foreach ($data->items as $key => $items)
@if ($key == $i)
<td class="text-center" width="10%">{{ $items->name }} </td>
<td class="text-center" width="10%"> <input class='price' type="number" name="price[$data->id][$key]" > </td>
<td class="text-center" width="10%"> <input class='discount' type="number" name="discount[$data->id][$key]" > </td>
<td class="text-center" width="10%"> </td>
@endif
@endforeach
</tr>
@endfor
@endforeach
</tbody>
<tfoot>
<tr>
<th colspan="2" class="text-right align-middle">Grand Total</th>
<th class="text-center align-middle"> <span id="totalprice"></span> </th>
<th class="text-center align-middle"> <span id="totaldiscount"></span> </th>
<th class="text-center align-middle" id="totalall"> </th>
</tr>
</tfoot>
</table>
<script type="text/javascript">
$(function() {
$("tbody").on("input", function() {
const totalprice = $(".price").map(function(i, input) {
const val = input.value && !isNaN(input.value) ? +input.value : 0;
$(input).closest("tr").find("td").eq(3).text(val)
return val;
}).get().reduce((acc, cur) => { acc += cur; return acc; }, 0)
$("#totalprice").text(totalprice);
const totalEach = $(".price").map(function(i, input) {
const price = input.value && !isNaN(input.value) ? +input.value : 0;
let discount = $(input).closest("td").next().find("input").val();
discount = discount && !isNaN(discount) ? +discount : 0;
const val = (price - price * (discount/100))
$(input).closest("tr").find("td").eq(3).text(val.toFixed(2))
return val;
}).get().reduce((acc, cur) => { acc += cur; return acc; }, 0)
$("#totalall").text(totalEach.toFixed(2))
const totaldiscount = $(".discount").map(function(i, input) {
return input.value && !isNaN(input.value) ? +input.value : 0;
}).get().reduce((acc, cur) => {
acc += cur;
return acc;
}, 0)
$("#totaldiscount").text(totaldiscount);
});
});
</script>
i guest the problem is in this code$(input).closest("tr").find("td").eq(3).text(val)
but i still confuse how to solve this. please help
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: attempt to read property "id" on null
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.