Dynamic sum with JavaScript in Laravel

Question

I am trying dynamic sum with JavaScript in my Laravel application. It is working fine when there is one row. But if I make a for each loop, how can I get the sum for each row?

Here is my form:

@foreach($users as $user)
    <div class="form-group">
        <input id="item1" type="number" class="prc form-control" name="item1[]">
    </div>
    <div class="form-group">
        <input id="item2" type="number" class="prc form-control" name="item2[]">
    </div>
    <output id="result" class="form-group"></output>
@endforeach

My JavaScript code is


$('.form-group').on('input', '.prc', function(){
   let totalSum = 0;
    $('.form-group .prc').each(function(){
         const inputVal = $(this).val();
          if($.isNumeric(inputVal)){
               totalSum += parseFloat(inputVal);
           }
      });
    $('#result').text(totalSum);
 });

I am getting the result in the first row only. How can I get values row by row?

You may try dynamic id and name like add extra foreach key and add this key with id and name — A.A Noman
– A.A Noman, Commented Apr 28, 2021 at 13:41

Swati · Accepted Answer · 2021-04-28 13:41:32Z

1

You have repeated ids so change them to class . Then , just add one outer div for per rows and use .closest(".outer") and .find(".prc") to loop through all inputs in that rows and then add total inside result using ..find(".result").text(totalSum)

Demo Code :

$('.form-group').on('input', '.prc', function() {
  let totalSum = 0;
  //get closest outer div
  var selector = $(this).closest(".outer")
  selector.find(".prc").each(function() {
    const inputVal = $(this).val();
    if ($.isNumeric(inputVal)) {
      totalSum += parseFloat(inputVal);
    }
  });
  //find result add result there
  selector.find(".result").text(totalSum);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--added outer div-->
<div class="outer">
  <div class="form-group">
    <!--use class-->
    <input type="number" class="prc  item1 form-control" name="item1[]">
  </div>
  <div class="form-group">
    <input type="number" class="prc  item2 form-control" name="item2[]">
  </div>
  <output class="result" class="form-group"></output>
</div>
<div class="outer">
  <div class="form-group">
    <input type="number" class="prc  item1 form-control" name="item1[]">
  </div>
  <div class="form-group">
    <input type="number" class="prc  item2 form-control" name="item2[]">
  </div>
  <output class="result" class="form-group"></output>
</div>

answered Apr 28, 2021 at 13:41

Swati

28.5k4 gold badges26 silver badges45 bronze badges

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

1 Comment

Swati Over a year ago

Glad i was able to help :)

Collectives™ on Stack Overflow

Dynamic sum with JavaScript in Laravel

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related