Home » Jquery » jquery – Calculate sum of each form row after cloning-Exceptionshub

jquery – Calculate sum of each form row after cloning-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I am trying to calculate the sum of each row after I am dynamically create these by using clone() in jQuery.

At the moment it just sums the very first row and not the second/third etc. Below is the div I am cloning. Any help would be highly appreciated. Many Thanks

<div id="itemRow" class="row itemRow">
  <select style="margin-top:5px; margin-bottom:5px;" id="jobnumbers" asp-for="JobNumber" type="" class="col-md-1 formfield">
    <option selected value="">...Project...</option>
    <option>101</option>
    <option>1223</option>
    <option>0098</option>
  </select>
  <select style="margin-top:5px; margin-bottom:5px;" id="mode" asp-for="Mode" type="" class="col-md-1 formfield">
    <option selected value="">...Mode...</option>
    <option>Test 1</option>
    <option>Test 2</option>
    <option>Test 3</option>
  </select>
  <select style="margin-top:5px; margin-bottom:5px;" id="cetegories" asp-for="Mode" type="" class="col-md-1 formfield">
    <option selected value="">...Category...</option>
    <option>Non Project</option>
    <option>Project Related</option>
  </select>
  <select style="margin-top:5px; margin-bottom:5px;" id="group" asp-for="Group" type="" class="col-md-1 formfield">
    <option selected value="">...Broad Group...</option>
    <option>Project design/set up</option>
    <option>Holiday/Bank Holiday</option>
  </select>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek1" name="DaysofWeek1" for='1' value="" asp-for="Monday" onblur="CalculateEachRowTotal(); CalculateTotalsForWeek();" class="form-control formfield DaysofWeek1" />
  </div>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek2" name="DaysofWeek2" for='1' value="" asp-for="Tuesday" onblur="CalculateEachRowTotal(); CalculateTotalsForWeek();" class="form-control formfield DaysofWeek2" />
  </div>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek3" name="DaysofWeek3" for='1' value="" asp-for="Wednesday" onblur="CalculateEachRowTotal(); CalculateTotalsForWeek();" class="form-control formfield DaysofWeek3" />
  </div>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek4" name="DaysofWeek4" for='1' asp-for="Thursday" onblur="CalculateEachRowTotal(); CalculateTotalsForWeek();" class="form-control formfield DaysofWeek4" />
  </div>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek5" name="DaysofWeek5" for='1' asp-for="Friday" onblur="CalculateEachRowTotal(); CalculateTotalsForWeek();" class="form-control formfield DaysofWeek5" />
  </div>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek6" name="DaysofWeek6" for='1' asp-for="Saturday" onblur="CalculateEachRowTotal(); CalculateTotalsForWeek();" class="form-control formfield DaysofWeek6" />
  </div>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek7" name="DaysofWeek7" for='1' asp-for="Sunday" onblur="CalculateEachRowTotal(); CalculateTotalsForWeek();" class="form-control formfield DaysofWeek7" />
  </div>
  <div class="col-md-1 formfield" style="margin-top:5px; margin-bottom:5px;">
    @Html.TextBoxFor(m => m.Total, new { @class = "form-control formfield rowTotal", @readonly = "readonly", @maxlength = "2" })
  </div>
</div>

Js that I current have is, please note I am just trying to find a solution first and will clean up a lot of this code 🙂

$('.itemRow').each(function (i) {
    DaysofWeek1 = $(this).find("input[name='DaysofWeek1']").val() === '' ? 0 : $("#DaysofWeek1").val();
    DaysofWeek2 = $(this).find("input[name='DaysofWeek2']").val() === '' ? 0 : $("#DaysofWeek2").val();
    DaysofWeek3 = $(this).find("input[name='DaysofWeek3']").val() === '' ? 0 : $("#DaysofWeek3").val();
    DaysofWeek4 = $(this).find("input[name='DaysofWeek4']").val() === '' ? 0 : $("#DaysofWeek4").val();
    DaysofWeek5 = $(this).find("input[name='DaysofWeek5']").val() === '' ? 0 : $("#DaysofWeek5").val();
    DaysofWeek6 = $(this).find("input[name='DaysofWeek6']").val() === '' ? 0 : $("#DaysofWeek6").val();
    DaysofWeek7 = $(this).find("input[name='DaysofWeek7']").val() === '' ? 0 : $("#DaysofWeek7").val();

    TotalAmount =
        parseInt(DaysofWeek1) +
        parseInt(DaysofWeek2) +
        parseInt(DaysofWeek3) +
        parseInt(DaysofWeek4) +
        parseInt(DaysofWeek5) +
        parseInt(DaysofWeek6) +
        parseInt(DaysofWeek7);

    if (TotalAmount === 0) {
        TotalAmount = 0;
        $(this).find(".rowTotal").val(TotalAmount);
    }
    else {
        $(this).find(".rowTotal").val(TotalAmount);
    }
});
How to&Answer:

This answer treats a part of your code. The code counts the total of Weekdays in the current Row and in the update, the Global Total sum of all days in every row.
And to avoid mentioning those inputs one by one, it’s a better to make them share a classname like here ".day" or a common custom data attribute like data-filter="day".

To handle dynamically added (non-DOm) rows, we always select their parent container.

$('.container').on('blur','.day',function(){

And later when I pass the current element as Argument in Sum($(this));, I again need to explain where is the parent container.
It’s like saying : I’m a lost clone if you want to count me with my siblings! I need to know where I’m I? Let me find my parents an I’d tell you where my siblings are located! Otherwise you will count my cousins with us… Because we all look the same 🙂

thisObj.parent().parent().find('input.day').each(function (i) {  

You can adapt your HTML code to use this and you can keep your other JS functions too. But if they handle cloned elements/sub-elements they better follow the same approach.

var i=0;
  var model = $('.itemRow');
  var frame = $('.container');
  function duplicate(){
		i++;
    var clone=model.clone();
    clone.find('.day,.rowTotal').val('');
    clone.attr("id","itemRow"+i);
    clone.appendTo(frame); 
  }
$('#addRow').on('click',function(){
		duplicate();
});  

function Sum(thisObj){
TotalAmount=0;
thisObj.parent().parent().find('input.day').each(function (i) {    
    TotalAmount+=parseInt($(this).val()) || 0;
});

thisObj.parent().parent().find(".rowTotal").val(TotalAmount);

}

function SumAll(){
  total=0;
  $(".container .day").each(function(){
      total+=parseInt($(this).val()) || 0;
  });
  $(".allDaysTotal").text(total);  
}

$('.container').on('blur','.day',function(){
Sum($(this));
SumAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <button id="addRow">Add Row</button>
<div class="container">
<div class="allDaysTotal"></div>
<div id="itemRow" class="row itemRow">
  <select style="margin-top:5px; margin-bottom:5px;" id="jobnumbers" asp-for="JobNumber" type="" class="col-md-1 formfield">
    <option selected value="">...Project...</option>
    <option>101</option>
    <option>1223</option>
    <option>0098</option>
  </select>
  <select style="margin-top:5px; margin-bottom:5px;" id="mode" asp-for="Mode" type="" class="col-md-1 formfield">
    <option selected value="">...Mode...</option>
    <option>Test 1</option>
    <option>Test 2</option>
    <option>Test 3</option>
  </select>
  <select style="margin-top:5px; margin-bottom:5px;" id="cetegories" asp-for="Mode" type="" class="col-md-1 formfield">
    <option selected value="">...Category...</option>
    <option>Non Project</option>
    <option>Project Related</option>
  </select>
  <select style="margin-top:5px; margin-bottom:5px;" id="group" asp-for="Group" type="" class="col-md-1 formfield">
    <option selected value="">...Broad Group...</option>
    <option>Project design/set up</option>
    <option>Holiday/Bank Holiday</option>
  </select>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek1" name="DaysofWeek1" for='1' value="" asp-for="Monday"  class="form-control formfield DaysofWeek1 day" />
  </div>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek2" name="DaysofWeek2" for='1' value="" asp-for="Tuesday"  class="form-control formfield DaysofWeek2 day" />
  </div>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek3" name="DaysofWeek3" for='1' value="" asp-for="Wednesday"  class="form-control formfield DaysofWeek3 day" />
  </div>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek4" name="DaysofWeek4" for='1' asp-for="Thursday"  class="form-control formfield DaysofWeek4 day" />
  </div>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek5" name="DaysofWeek5" for='1' asp-for="Friday"  class="form-control formfield DaysofWeek5 day" />
  </div>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek6" name="DaysofWeek6" for='1' asp-for="Saturday"  class="form-control formfield DaysofWeek6 day" />
  </div>
  <div class="col-md-1" style="margin-top:5px; margin-bottom:5px;">
    <input id="hdtext1" name="hdtext1" class="form-control" type="hidden" />
    <input id="DaysofWeek7" name="DaysofWeek7" for='1' asp-for="Sunday"  class="form-control formfield DaysofWeek7 day" />
  </div>
  <div class="col-md-1 formfield">
    RowTotal:
    <input value="" class="rowTotal"/>
  </div>
</div>

</div>