CODEWITHSUNDEEP
javascriptphplaravel
Ahsan
Ahsan

Reputation: 1359

Dynamic sum with JavaScript in Laravel

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);
 });

enter image description here

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

Upvotes: 1

Views: 310

Answers (1)

Swati
Swati

Reputation: 28522

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>

Upvotes: 1

Related Questions