How can add all the values of Input Number tag inside the td of a table, only if any change in any column value

Question

I am trying to find sum of all values of all the Input Number under the class 'emphrs' in javascript. The sum of all Input numbers should be calculated only if there is any change in any column value of input under the class 'emphrs'. Here is my code, the total should be stored in a variable only if there is any change in input number under the class emphrs

<tbody>
            @if (Model.Emplist != null)
            {
                for (var i = 0; i < Model.Emplist.Count; i++)
                {
                     
        
                    <tr>
                        <td style="width:10%;text-align:center;vertical-align:middle;">@Model.Emplist[i].EmployeeName</td>
                         
        
                       
                        <td >
                            <div class="showinline">
                                @Html.TextBoxFor(m => m.attendanceLogList[i].NormalHrs, new { @class = "form-control input-sm emphrs", @style= columnstyle,
                                   @Value = Model.attendanceLogList[i].NormalHrs, @type = "number", onchange = "CalculateTotal(this);" })
                            </div>
                        </td>
        
        
                        <td>
                            <div class="showinline">
                                @Html.TextBoxFor(m => m.attendanceLogList[i].DayOffHrs, new { @class = "form-control input-sm emphrs", @style= columnstyle,
                                   @Value = Model.attendanceLogList[i].DayOffHrs, @type = "number", onchange = "CalculateTotal(this);" })
                            </div>
                        </td>
        
                        <td>
                            @Html.TextBoxFor(m => m.attendanceLogList[i].HolidayHrs, new { @class = "form-control input-sm emphrs", @style= columnstyle,
                                   @Value = Model.attendanceLogList[i].HolidayHrs, @type = "number", onchange = "CalculateTotal(this);" })
                        </td>
                      
                        
                       
                    </tr>
                }
        
            }
        
        </tbody>
    <script>

function CalculateTotal(element) {
        var $box = $(element);
        console.log($box);
        $box.parent('td').parent('tr').find(".emphrs").each(function () {
            // Here I have to sum up all the values of Tds having the class emphrs
        });
        
    }
    </script>
    

Answer 1

Yes certainly. There are 2 things u need to do. First, you need add a java script function to calculate the total. Then you need to add onChange on your input in html.

change input in your view into something like this

<td>@Html.TextBoxFor(m => m.Emplist[i].NormalHrs, new { @class = "form-control input-sm NormalHrs", @Value = @item.NormalHrs, onchange = "CalculateTotal()" })</td>

What I did here is to add a NormalHrs class and also the CalculateTotal Function in the html text box.

Here is the javascript function to add the total

function CalculateTotal() {

var itemCount = $('.NormalHrs').length; // get Item Count by Class

for (i = 0; i < itemCount; i++) {


    var NormalHrs = parseFloat($('#Emplist_' + i + '__NormalHrs').val()).toFixed(2); // get value for each rows
  

    if (isNaN(NormalHrs)) {
        NormalHrs = 0;
    }


    var totalNormalHours = 0;

    totalNormalHours = +totalNormalHours + +NormalHrs;

    alert(totalNormalHours);

   }
}

Do let me know whether the code is working.