I would recommend you to give clear explanation of the code but i have tried to understand your code and tried to debug your code.
You are getting NaN, because some of the values inside forEach are undefined. And when you add undefined to a number, it results in NaN.
Please use below logic and replace in your code.
$('#Tab_BDSP tbody tr td').each(function() {
result += $(this).attr('data-lowest') ? +$(this).attr('data-lowest') : 0;
});You are running the function and looping through textboxes in all columns, which is causing you to get bad values. You need to check only the amount textboxes.
Add a class and a starting value for data-lowest to the Amount td:
<td data-lowest="0" class="amountTD">...</td>
Add the class to the jQuery event:
jQuery( document ).on( 'change', '#Tab_BDSP tbody tr td.amountTD input[type="text"]', function ()
And add it to the loop like so, and wrap result in parseInt:
jQuery( '#Tab_BDSP tbody tr td.amountTD' ).each( function ()
{
result += parseInt( jQuery( this ).attr( 'data-lowest' ) );
});
i am having a trouble having the sum of 3 lowest values entered in columns added dynamically. it shows no value in the Total Cost Field, although if i changed the type from number to text of Total Cost Field. It gives NaN into it. I have tried a lot but did not get on the final step. Please look into, i really can use some help in this regard
//JS To Add Rows Dynamically
$(document).ready(function() {
var i = 1;
$("#Add_BDSP").click(function() {
$('#BDSP' + i).html("<td><select class='form-control show-tick form-group form-float' name='RequiredServices[" + i + "]' id='Services'><optgroup label=' financial services'><option id='AccountingSoftware' value='ERP Systems'>ERP Systems</option> <option id='AccountingSystems' value='Accounting Book Keeping Systems'>Accounting / Book Keeping Systems</option><option id='ProductCosting' value='Product Costing'>Product Costing</option><option id='FinancialManagement' value='Financial Management Systems'>Financial Management Systems</option></optgroup><optgroup label='HR Services'><option id='HRPolicies' value='HR Policies and Procedures'>HR Policies and Procedures</option><option id='HR_System' value='HR_System'>HR Systems</option><option id='Appraisal' value='Appraisal'>Employee Internal Trainings Manuals</option><option id='SalesManagement' value='SalesManagement'>sEmployee Orientation Manuals.</option> </optgroup><optgroup label='General Management'><option id='Project' value='ProjectManagement'>Project Management System</option><option id='Inventory' value='Inventory Management Systems'>Inventory Management Systems</option><option id='Warehouse' value='Warehouse'>Procurement System</option><option id='SupplyChain' value='SupplyChain'>Supply Chain Systems</option><option id='FleetManagement' value='Fleet Management Systems'>Fleet Management Systems</option></optgroup><optgroup label='Regulatory Services'><option id='Sales_Income_Tax' value='Sales_Income_Tax'>sales / Income Tax Services</option><option id='TradeMark' value='TradeMark'>Intellectual Property Rights</option><option id='BusinessRegistration' value='BusinessRegistration'>Business Registration Services</option><option id='B2B' value='B2B'>B2B, B2C Contracting Services</option><option id='BusinessLicensing' value='BusinessLicensing'>Business Licensing Services</option></optgroup><optgroup label='Production Management'><option id='ProductionPlanning' value='ProductionPlanning'>Production Planning & Control Systems</option><option id='ProductionManagement' value='ProductionManagement'>Warehouse Management Information Systems (WMIS)</option> </optgroup></select> </td><td><div class='input-group form-group form-float'><div class='form-line'><input type='text' name='Description[" + i + "]' ></div></div></td><td><input type='text' name='BDSPName1[" + i + "]' placeholder='BDSP Name'class='form-control' required /><input type='text' name='BDSPName2[" + i + "]' placeholder='BDSP Name'class='form-control' /><input type='text' name='BDSPName3[" + i + "]' placeholder='BDSP Name'class='form-control' /></td> <td><input type='text' name='BDSP_NTN1[" + i + "]'placeholder='BDSP NTN Number' class='form-control'/><input type='text' name='BDSP_NTN2[" + i + "]'placeholder='BDSP NTN Number' class='form-control' /><input type='text' name='BDSP_NTN3[" + i + "]'placeholder='BDSP NTN Number' class='form-control' /></td><td><input type='text' name='QuotedAmount1[" + i + "]' placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount2[" + i + "]'placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount3[" + i + "]' placeholder='Quoted Amount' class='form-control'/> </td><td><select class='form-group form-control' name='ExpectedDeliveryTime1[" + i + "]' id='ExpectedDeliveryTime1[0]'><option selected disabled>Select Days</option><option value='30' class='form-control input-md'>30</option><option value='60' class='form-control input-md'>60</option><option value='90' class='form-control input-md'>90</option><option value='120' class='form-control input-md'>120</option><option value='150' class='form-control input-md'>150</option><option value='180' class='form-control input-md'>180</option><option value='more180' class='form-control input-md'>More Than 180</option></select><select class='form-group form-control' name='ExpectedDeliveryTime2[" + i + "]' id='ExpectedDeliveryTime2[0]'><option selected disabled>Select Days</option><option value='30' class='form-control input-md'>30</option><option value='60' class='form-control input-md'>60</option><option value='90' class='form-control input-md'>90</option><option value='120' class='form-control input-md'>120</option><option value='150' class='form-control input-md'>150</option><option value='180' class='form-control input-md'>180</option><option value='more180' class='form-control input-md'>More Than 180</option></select><select class='form-group form-control' name='ExpectedDeliveryTime3[" + i + "]' id='ExpectedDeliveryTime3[0]'><option selected disabled>Select Days</option><option value='30' class='form-control input-md'>30</option><option value='60' class='form-control input-md'>60</option><option value='90' class='form-control input-md'>90</option><option value='120' class='form-control input-md'>120</option><option value='150' class='form-control input-md'>150</option><option value='180' class='form-control input-md'>180</option><option value='more180' class='form-control input-md'>More Than 180</option></select></td><td><input type='file' name='Quotation1[" + i + "]' class='form-control' /><input type='file' name='Quotation2[" + i + "]' class='form-control' /><input type='file' name='Quotation3[" + i + "]' class='form-control' /></td>");
$('#Tab_BDSP').append('<tr id="BDSP' + (i + 1) + '"></tr>');
i++;
});
$("#Delete_BDSP").click(function() {
if (i > 1) {
$("#BDSP" + (i - 1)).html('');
i--;
}
});
});
//JS To Add Lowest Value
$(document).on('change', '#Tab_BDSP tbody tr td input[type="text"]', function() {
let result = 0;
var MulRes = $('input#ServiceTotalCost');
var QuotedAmount1 = $(this).parent().find('input[type="text"]').eq(0),
QuotedAmount2 = $(this).parent().find('input[type="text"]').eq(1),
QuotedAmount3 = $(this).parent().find('input[type="text"]').eq(2);
var Qoute1 = (isNaN(parseInt(QuotedAmount1.val()))) ? 0 : parseInt(QuotedAmount1.val()),
Qoute2 = (isNaN(parseInt(QuotedAmount2.val()))) ? 0 : parseInt(QuotedAmount2.val()),
Qoute3 = (isNaN(parseInt(QuotedAmount3.val()))) ? 0 : parseInt(QuotedAmount3.val());
var min = Math.min(Qoute1, Qoute2, Qoute3);
$(this).parent().attr('data-lowest', min)
$('#Tab_BDSP tbody tr td').each(function() {
result += +$(this).attr('data-lowest')
});
MulRes.val(result)
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12">
<p>
<b>Please Provide At Least 3 BDSPs Quotations Against Each Service</b> <span style="color: red">*</span>
</p>
<div class="form-group form-float">
<table class="table table-bordered table-hover" id="Tab_BDSP">
<thead>
<tr>
<td>Services Required</td>
<td>Description</td>
<td>BDSP Name</td>
<td>NTN No.</td>
<td>Amount</td>
<td>Expected Delivery Time</td>
<td>Attach Quotation</td>
</tr>
</thead>
<tbody>
<tr id='BDSP0'>
<td>
<select class="form-control show-tick form-group form-float" name="RequiredServices[0]" id="Services" required>
<optgroup label="Financial Services">
<option id="AccountingSoftware" value="ERP Systems">ERP Systems</option>
<option id="AccountingSystems" value="Accounting Book Keeping Systems">Accounting / Book Keeping Systems</option>
<option id="ProductCosting" value="Product Costing">Product Costing</option>
<option id="FinancialManagement" value="Financial Management Systems">Financial Management Systems</option>
</optgroup>
<optgroup label="HR Services">
<option id="HRPolicies" value="HR Policies and Procedures">HR Policies and Procedures</option>
<option id="HR_System" value="HR_System">HR Systems</option>
<option id="Appraisal" value="Appraisal">Employee Internal Trainings Manuals</option>
<option id="SalesManagement" value="SalesManagement">sEmployee Orientation Manuals.</option>
</optgroup>
<optgroup label="General Management">
<option id="Project" value="ProjectManagement">Project Management System</option>
<option id="Inventory" value="Inventory Management Systems">Inventory Management Systems</option>
<option id="Warehouse" value="Warehouse">Procurement System</option>
<option id="SupplyChain" value="SupplyChain">Supply Chain Systems</option>
<option id="FleetManagement" value="Fleet Management Systems">Fleet Management Systems</option>
</optgroup>
<optgroup label="Regulatory Services">
<option id="Sales_Income_Tax" value="Sales_Income_Tax">sales / Income Tax Services</option>
<option id="TradeMark" value="TradeMark">Intellectual Property Rights</option>
<option id="BusinessRegistration" value="BusinessRegistration">Business Registration Services</option>
<option id="B2B" value="B2B">B2B, B2C Contracting Services</option>
<option id="BusinessLicensing" value="BusinessLicensing">Business Licensing Services</option>
</optgroup>
<optgroup label="Production Management">
<option id="ProductionPlanning" value="ProductionPlanning">Production Planning & Control Systems</option>
<option id="ProductionManagement" value="ProductionManagement">Warehouse Management Information Systems (WMIS)</option>
</optgroup>
<optgroup label="Other Services">
<option id="Other" value="OtherServices">Mention Other Services</option>
</optgroup>
</select>
</td>
<td>
<div class="input-group form-group">
<div class="form-line">
<input type="text" class="form-control" name="Description[0]" id="Description" required>
</div>
</div>
</td>
<td>
<input type="text" name='BDSPName1[0]' placeholder='BDSP Name' class="form-control" required />
<input type="text" name='BDSPName2[0]' placeholder='BDSP Name' class="form-control" required />
<input type="text" name='BDSPName3[0]' placeholder='BDSP Name' class="form-control" required />
</td>
<td>
<input type="text" name='BDSP_NTN1[0]' placeholder='BDSP NTN Number' class="form-control" required />
<input type="text" name='BDSP_NTN2[0]' placeholder='BDSP NTN Number' class="form-control" required />
<input type="text" name='BDSP_NTN3[0]' placeholder='BDSP NTN Number' class="form-control" required />
</td>
<td>
<input type="text" name='QuotedAmount1[0]' placeholder='Quoted Amount' class="form-control" required />
<input type="text" name='QuotedAmount2[0]' placeholder='Quoted Amount' class="form-control" required />
<input type="text" name='QuotedAmount3[0]' placeholder='Quoted Amount' class="form-control" required />
</td>
<td>
<select class="form-group form-control" name="ExpectedDeliveryTime1[0]" id="ExpectedDeliveryTime1[0]" required>
<option selected disabled>Select Days</option>
<option value="AJK" class='form-control input-md'>30</option>
<option value="Balochistan" class='form-control input-md'>60</option>
<option value="GB" class='form-control input-md'>90</option>
<option value="ICT" class='form-control input-md'>120</option>
<option value="KPK" class='form-control input-md'>150</option>
<option value="Punjab" class='form-control input-md'>180</option>
<option value="Sindh" class='form-control input-md'>More Than 180</option>
</select>
<select class="form-group form-control" name="ExpectedDeliveryTime2[0]" id="ExpectedDeliveryTime2[0]" required>
<option selected disabled>Select Days</option>
<option value="AJK" class='form-control input-md'>30</option>
<option value="Balochistan" class='form-control input-md'>60</option>
<option value="GB" class='form-control input-md'>90</option>
<option value="ICT" class='form-control input-md'>120</option>
<option value="KPK" class='form-control input-md'>150</option>
<option value="Punjab" class='form-control input-md'>180</option>
<option value="Sindh" class='form-control input-md'>More Than 180</option>
</select>
<select class="form-group form-control" name="ExpectedDeliveryTime3[0]" id="ExpectedDeliveryTime3[0]" required>
<option selected disabled>Select Days</option>
<option value="AJK" class='form-control input-md'>30</option>
<option value="Balochistan" class='form-control input-md'>60</option>
<option value="GB" class='form-control input-md'>90</option>
<option value="ICT" class='form-control input-md'>120</option>
<option value="KPK" class='form-control input-md'>150</option>
<option value="Punjab" class='form-control input-md'>180</option>
<option value="Sindh" class='form-control input-md'>More Than 180</option>
</select>
</td>
<td>
<input type="file" name="Quotation1[0]" class="form-control" required />
<input type="file" name="Quotation2[0]" class="form-control" required />
<input type="file" name="Quotation3[0]" class="form-control" required />
</td>
</tr>
<tr id='BDSP1'></tr>
</tbody>
</table>
</div>
<a id="Add_BDSP" class="btn btn-default pull-left">Add Row</a><a id='Delete_BDSP' class="pull-right btn btn-default">Delete Row</a>
</div>
<div class="col-md-4">
<p>
<b>Total Cost Of The Service</b> <span style="color: red">*</span>
</p>
<div class="input-group form-group">
<span class="input-group-addon">
<i class="material-icons">business_center</i></span>
<div class="form-line">
<input type="number" class="form-control" name="ServiceTotalCost" id="ServiceTotalCost" required>
</div>
</div>
</div>Please clarify what you are trying to accomplish – are you trying to get the sum of the 3 textboxes in the amount column as the total?
I want to add multiple rows and enter amount in Quote Amount column(s). the code should sum the lowest value among 3 values of each dynamically added rows in Total Cost Field. e.g. First row contains Quote Amount column contain 2 3 4 Entries and second row contains Quote Amount column 1 2 3 values so the code must add the lowest among both Quote Amount columns i.e. 2+1 = 3. and this 3 must get into the Total Cost field added below the “Add_Row, Delete_Row” table.
@AdilRiaz like Jasdeep Singh you are looking for a undefined object and thats why is returning NaN, I believe that you should add a delegate event per each element and not each TD, to evaluate the field based on what the user types or select.
Many many thank respected sir…Code executing so comprehensively.
Dear sir one more problem i’m facing regarding this code is that when i delete dynamic rows in which data is already enter it did not show actual value after deleting the row e.g initially i enter three rows but i feel to delete one row out of three rows it did not return actual value of two column after deleting one column it return sum of three column.your kind help required…
At the end of your delete function, add the following line of code to rerun the total code: jQuery( ‘#Tab_BDSP tbody tr td.amountTD input[type=”text”]’ ).change(); Also be sure to add the amountTD class to the html in the add function as well.
Dear Sir i added all above mention parameters in code it not work please correct this code your kind response in this regard will be highly appreciated.