CODEWITHSUNDEEP
jquerylaravel
SleepWalker
SleepWalker

Reputation: 637

Calculating the columns inside foreach using jQuery is not working in Laravel

I have a table that is being populated by the items from database. I use foreach to dynamically add rows for the next items. And also I use jquery to calculate the price and quantity per row but the problem is I can't make it work. here's my Code,

@php
    $counter = 0;
@endphp
@foreach($order->orderItems as $orderItem)
@php
    $counter++; 
@endphp
    <tr>
        <td><input class="form-control autocomplete_txt" type='text' data-type="product_code" id='product_code_{{$counter}}' name='product_code[]' for="1" value="{{ $orderItem->product_code }}" required/></td>
        <td><input class="form-control autocomplete_txt" type='text' data-type="product_name" id='product_name_{{$counter}}' name='product_name[]' for="1" value="{{ $orderItem->product_name }}" required/></td>
        <td><input class="form-control product_price" type='number' data-type="product_price" id='product_price_{{$counter}}' name='cost[]' for="1" value="{{ $orderItem->cost }}" required/></td>
        <td><input class="form-control quantity" type='number' id='quantity_{{$counter}}' name='quantity[]' for="1" value="{{ $orderItem->quantity }}" required/></td>
        <td><input class="form-control total_cost" type='text' id='total_cost_1' name='total_cost[]' for='1' value="{{ $orderItem->total_cost }}" readonly/>
            <input class="form-control product_id" type='hidden' data-type="product_id" id='product_id_{{ $orderItem->id }}' name='product_id[]'/>
            <input class="form-control product_id" type='hidden' data-type="order_id" id='oder_id_{{ $orderItem->id }}' name='order_id[]' value="1" /></td>
        <td>
            @if ($counter % 1 == 0 && $counter > 1)
            @else
                <button type="button" name="add" id="add" class="btn btn-success circle"><i class="fas fa-plus-circle"></i></button>
            @endif
        </td>

        <script type="text/javascript">
            var calc = {{$counter}};

            function getTotalCost(calc) {
                var qty1 = $('#quantity_'+calc).val();
                var price1 = $('#product_price_'+calc).val();
                var totNumber1 = (qty1 * price1);
                var tot1 = totNumber1.toLocaleString("en-US", { maximumFractionDigits: 2});
                $('#total_cost_'+calc).val(tot1);
                calculateSubTotal1();
            }
            function calculateSubTotal1() {
                var grandtotal1 = 0;
                $('.total_cost').each(function() {
                    grandtotal1 += parseFloat($(this).val().replace(/,/g,''));
                });                    
                $('#grandtotal').val(grandtotal1.toLocaleString("en-US", { maximumFractionDigits: 2}));
            }
        </script>
    </tr>
@endforeach

Please help. Thank you so much in advance!

Upvotes: 0

Views: 509

Answers (2)

Omene Joseph Ogheneruno
Omene Joseph Ogheneruno

Reputation: 271

first of all, javascript would not be able to recognize the $counter variable you are passing to it in your script tag from PHP. try wrapping your double mustasche with quotes like so let count = "{{$counter}}" or using let count = {!! $count !!}. Try this and see if your logic works.

Upvotes: 0

K&#233;vin Bibollet
K&#233;vin Bibollet

Reputation: 3623

Try waiting your DOM to load entirely. Inside your loop:

@foreach (...)
...
<script>
// Execute your DOM manipulations when document is ready.
$(document).ready(function() {
    var calc = {{$counter}};

    getTotalCost(calc);
});
</script>
...
@endforeach

Outside:

<script>
    function getTotalCost(calc) {
        var qty1 = $('#quantity_'+calc).val();
        var price1 = $('#product_price_'+calc).val();
        var totNumber1 = (qty1 * price1);
        var tot1 = totNumber1.toLocaleString("en-US", { maximumFractionDigits: 2});

        $('#total_cost_'+calc).val(tot1);

        calculateSubTotal1();
    }

    function calculateSubTotal1() {
        var grandtotal1 = 0;

        $('.total_cost').each(function() {
            grandtotal1 += parseFloat($(this).val().replace(/,/g,''));
        });    

        $('#grandtotal').val(grandtotal1.toLocaleString("en-US", { maximumFractionDigits: 2}));
    }
</script>

TIPS:

In a foreach loop in blade, you have access to a generated variable called $loop.

And with what I can see, your $counter variable has the same result as a property of the $loop one: $loop->iteration.

Check the Laravel Documentation for more properties of a blade loop.

Upvotes: 1

Related Questions