如何从动态生成文本框计算小计文本框的总数

Question

I had form that can be dynamic generate when click add button. I want to get the total of all subtotal textbox(man_day_rates * estimated_man_days). But my current code only calculate the first input row. How can I auto calculate all the subtotal input.

 $(document).ready(function(){ var i=1; $('#add').click(function(){ //$("#step-2").height(5000); if(i == 1){ //add_remove_button $('#dynamic_field .add_remove_button').append('<button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button>'); } i++; //Add field document History $('.dynamic_field .rowTotal').before('<tr id="row1'+i+'"><td></td>\\ </td>\\ <td style="">\\ <input id="man_day_rates'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >\\ </td>\\ <td style="">\\ <input id="estimated_man_days'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">\\ </td>\\ <td style=""> <input id="result'+i+'" class="form-control col-md-7 col-xs-12 sum" disabled type="text" name="" value=""/></td>\\ <td style="height: 20px;line-height: 20px;white-space: nowrap;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button></td>\\ </tr> '); //function to calculate sub total for dynamic input/input after the first input var man_day_rates = $('#man_day_rates'+i); var estimated_man_days = $('#estimated_man_days'+i); var result = $('#result'+i); estimated_man_days.keyup(function(){ var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val()); result.val(total); //alert(total); }); man_day_rates.keyup(function(){ var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val()); result.val(total); //alert(total); }); }); //function to calculate subtotal function calculateSum() { var sum = 0; //iterate through each textboxes and add the values $(".sum").each(function() { //add only if the value is number if (!isNaN(this.value) && this.value.length != 0) { sum += parseFloat(this.value); } }); $("#subtotal").val(sum.toFixed(2)); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="table-responsive"> <table class="table table-hover table-striped dynamic_field" id="dynamic_field" style="padding:0px;"> <thead> <tr class="headings"> <th class="column-title">#</th> ] <th class="column-title" style="min-width:110px;">Man Day Rates (RM)</th> <th class="column-title" style="min-width:110px;">Estimated Man Days </th> <th class="column-title"style="min-width:110px;">Subtotal (RM)</th> <th class="column-title"style=""></th> </th> </tr> </thead> <tbody> <tr id="row01" class="row01"> <td>1</td> <?php $i = 1; ?> <td style=""> <input id="man_day_rates<?php echo $i; ?>" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" > </td> <td style=""> <input id="estimated_man_days<?php echo $i; ?>" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]" > </td> <td id=""> <input id="result<?php echo $i; ?>" type="text" class="form-control col-md-7 col-xs-12 sum" disabled name="" value=""/></td> <td class="add_remove_button" style="height: 20px;line-height: 20px;white-space: nowrap;"></td> </tr> <tr id="" class="rowTotal" style="background-color:white;"> <td style="border:none;visibility: hidden;"></td> <td style="border:none;"> </td> <td style="border:none;"> </td> <td style="border:none;"> </td> <td style="border:none;text-align:right;padding-right:0px;" > <label class="control-label col-md-12 col-sm-12 col-xs-12" for="name">Subtotal </label> </td> <td style="border:none;" > <input id="subtotal" type="text" class="form-control col-md-7 col-xs-12" disabled name="subtotal" value=""/></td> <td class="" style="border:none;height: 20px;line-height: 20px;white-space: nowrap;"></td> </tr> <tr id="" class="" style="background-color:white;"> <td style="border:none; visibility: hidden;"></td> <td style="border:none;"> </td> <td style="border:none;"> </td> <td style="border:none;"> </td> <td style="border:none;text-align:right;padding-right:0px;" > <label class="control-label col-md-12 col-sm-12 col-xs-12" for="name">6% GST </label> </td> <td style="border:none;" > <input id="result" type="text" class="form-control col-md-7 col-xs-12" disabled name="" value=""/></td> <td class="" style="border:none;height: 20px;line-height: 20px;white-space: nowrap;"></td> </tr> <tr id="" class="" style="background-color:white;"> <td style="border:none; visibility: hidden;"></td> <td style="border:none;"> </td> <td style="border:none;"> </td> <td style="border:none;"> </td> <td style="border:none;text-align:right;padding-right:0px;" > <label class="control-label col-md-12 col-sm-12 col-xs-12" for="name">Total </label> </td> <td style="border:none;" > <input id="result" type="text" class="form-control col-md-7 col-xs-12 sum" disabled name="" value=""/></td> <td class="" style="border:none;height: 20px;line-height: 20px;white-space: nowrap;"></td> </tr> </tbody> </table> </div> <div><button id="add" type="button" class="btn btn-primary "><span class="fa fa-plus" style="margin-right:5px;"></span>Add Items</button></div> 

I had form that can be dynamic generate when click add button. I want to get the total of all subtotal textbox(man_day_rates * estimated_man_days). But my current code only calculate the first input row. How can I auto calculate all the subtotal input.

Answer 1

Here i am not going to write code, just give you a suggestion, because i already develop this kind of stuff.

you need to create blur event on Man Day Rates And Estimate Man Days to multiply and store to subtotal. because subtotal field is disable, you no need to create any event on this. add class subtotal to all subtotal field.

now inside blur event you need to loop by this

var total = 0;

$(".subtotal").each(function()
{
    total += parseFloat($(this).val());
});

$("#grand-subtotal").val(total);

you should use on event if your fields on generated by javascript code.