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

Question

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!

Kévin Bibollet · Accepted Answer · 2019-03-04 14:36:58Z

1

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.

edited Mar 4, 2019 at 14:36

answered Mar 4, 2019 at 13:55

Kévin Bibollet

3,6331 gold badge17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

SleepWalker Over a year ago

Hi @iArcadia its still not working. I moved the script out of foreach.

Kévin Bibollet Over a year ago

@LitoLozada You can't move your script because your PHP variable $counter will not be defined, and so will throw an error. The anonymous function passed as a argument to ready() will be executed when your DOM is loaded, even if your <script> tag is placed in your loop.

Kévin Bibollet Over a year ago

Also added a tip for blade loop in my answer.

SleepWalker Over a year ago

Hi @iArcadia I just return the script to its previous location. It is still not working. Also thank you for the documentation link.

Kévin Bibollet Over a year ago

Your getTotalCost function is defined but never executed. You should move your two defined functions outside your loop in another <script> tag. Then, execute getTotalCost in each iteration of the loop. Check my edited answer.

|

Omene Joseph Ogheneruno · Accepted Answer · 2019-03-04 15:01:07Z

0

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.

answered Mar 4, 2019 at 15:01

Omene Joseph Ogheneruno

2712 gold badges3 silver badges11 bronze badges

1 Comment

Kévin Bibollet Over a year ago

I don't see why, $counter is an integer

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related