<script type="text/javascript">
function FetchData(button) {
var row = button.parentNode.parentNode;
var label = GetChildControl(row, "quantity_1").value;
var label1 = GetChildControl(row, "product_rate_1").value;
var Multi = parseFloat(label) * parseFloat(label1);
GetChildControl(row, "total_price_1").value = Multi;
var tot = 0;
for (var i = 0; i < Multi.length; i++) {
if (parseInt(Multi[i].value))
tot += parseInt(Multi[i].value);
}
document.getElementById('grandTotal').value = tot;
console.log(+tot)
};
function GetChildControl(element, id) {
var child_elements = element.getElementsByTagName("*");
for (var i = 0; i < child_elements.length; i++) {
if (child_elements[i].id.indexOf(id) != -1) {
return child_elements[i];
console.log(+i)
}
}
};
</script>
<pre> <table class="table" id="maintable">
<thead>
<tr>
<th class="text-center" width="20%">Item Informationclass="text-danger" id=""__^</th>
<th class="text-center">Expiry date ^__i class="text-danger"__^*</i></th>
<th class="text-center">Stock/Qnt</th>
<th class="text-center">Quantity ^__i class="text-danger">*</th>
<th class="text-center">Manufacturer Price^__i class="text-danger">*</th>
<th class="text-center">Total</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" name="f-name" class="form-control f-name01" /></td>
<td>
<input type="text" name="l-name" class="form-control l-name01" /></td>
<td>
<input type="text" name="email" class="form-control datepicker" /></td>
<td >
<input type="text" name="stock" class="form-control stock01" /></td>
<td>
<input type="text" name="product_quantity" id="quantity_1" onkeyup="FetchData(this),findTotal()" placeholder="0.00" value="" min="0" class="form-control qty01" required="required"/></td>
<td >
<input type="text" name="product_rate" onkeyup="FetchData(this),findTotal()" id="product_rate_1" placeholder="0.00" value="" min="0" class="form-control rate01" required="required"/></td>
<td>
<input type="text" name="total_price" id="total_price_1" value="0.00" readonly="readonly" class="form-control total_price" /></td>
<td>
<button type="button" id="btnAdd" onclick="FetchData(this),findTotal()" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<%-- <input type="button" id="add_invoice_item" class="btn btn-info" name="add-invoice-item" onclick="addPurchaseOrderField1('addPurchaseItem');" value="Add New Item" tabindex="11">--%>
<input type="hidden" name="baseUrl" class="baseUrl" value="">
</td>
<td style="text-align:right;" colspan="4">^__b>Grand Total:</td>
<td class="text-right">
<input type="text" id="grandTotal" class="text-right form-control" name="grand_total_price" value="0.00" readonly="readonly">
</td>
</tr>
</tfoot>
</table>
</div>
What I have tried:
<script type="text/javascript">
function findTotal() {
var arr = document.getElementsByName('total_price');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('grandTotal').value = tot;
console.log(+tot)
}
</script>
First Row getting Calculate grandtotal ,if i added the row dynamically
not calculating..