I am not perfect in Javascript... I want to display that total sum of values shown in the amount input boxes in the next field named the sub total without refreshing page. I am trying but can not get success .Can anyone help me to figure it out....?
Thanks..
Javascript code for sum of n numbers.
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
const subTotalField = document.getElementById("subTotal");
subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td class="text-end" id="subTotal">0</td>
</tr>
</tbody>
</table>
Everytime you are adding the subtotal with the new value.
For example : you entered quantity 10 and unit price 1 then amount is 10 , for the first time you don't have any value in sub total so you will get 0 in parseInt(subTotalField.innerHTML) value.
subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;
subTotalField.innerHTML = 0 + 10*1
subTotalField.innerHTML = 10
But when you are changing value from 10 to 20 in the quantity field, this time you have value in subTotalField.innerHTML
So now it will be
subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;
subTotalField.innerHTML = 10 + 20*1
subTotalField.innerHTML = 30
You are expecting it as 20 but the code is returning 30
So to resolve this issue, you should replace mul function with this
function mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
const subTotalField = document.getElementById("subTotal");
var finalAmount = 0;
Array.from(document.getElementsByClassName("amount")).forEach(ele=>{
if(ele.value){
finalAmount = finalAmount + ele.value
}
})
subTotalField.innerHTML = finalAmount;
}
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
const subTotalField = document.getElementById("subTotal");
subTotalField.innerHTML = Array.from(document.getElementsByClassName("amount")).reduce((sum, element) => {
if (element.value.length === 0) return sum;
return sum + parseInt(element.value);
}, 0)
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control" onkeyup="Mul('0')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control" disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control" onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control" disabled>
</td>
</tr>
</tbody>
</table>
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td class="text-end" id="subTotal">0</td>
</tr>
</tbody>
</table>
Related
I want to display the total sum of values shown in the amount input-boxes in the next field named sub total without refreshing page.
JS-code for sum of n numbers:
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td class="text-end">0</td>
</tr>
</tbody>
</table>
</div>
I don't know why, but obviously rare are those who understand that using a form has benefits ...
const myForm = document.forms['my-form']
myForm.oninput = ({target: elm}) => // for any change iside the form
{
let
row = elm.closest('tr')
, Dsc = row.querySelector('input[name^="desc"]')
, Qte = row.querySelector('input[name^="quantity"')
, Prx = row.querySelector('input[name^="price"')
, Amt = row.querySelector('input[name^="amount"')
;
Dsc.required = (Qte.valueAsNumber > 0)
switch (elm.name.split('_')[0]) {
case 'quantity':
case 'price':
Amt.value = Qte.valueAsNumber * Prx.valueAsNumber
myForm.SubTotal.textContent =
[...myForm.querySelectorAll('input[name^="amount"')]
.reduce((sum,el)=>sum + +el.value,0)
break;
}
}
myForm.onsubmit = e =>
{
e.preventDefault() // disable form submiting
let formInputs = Object.fromEntries( new FormData(myForm).entries() )
console.clear()
console.log( formInputs)
}
table {
border-collapse: collapse;
margin : 2em 1em;
}
td, th {
padding : .2em;
border : 1px solid darkblue;
}
input {
width : 6em;
text-align : right;
}
td:first-of-type input {
width : 10em;
text-align : left;
}
<form name="my-form">
<table>
<thead>
<tr> <th>Description</th> <th>Quantity</th> <th>Unit Price</th> <th>Amount</th> </tr>
</thead>
<tbody>
<tr>
<td> <input type="text" name="desc_1" > </td>
<td> <input type="number" name="quantity_1" value="0" min="0"> </td>
<td> <input type="number" name="price_1" value="0" min="0"> </td>
<td> <input type="text" name="amount_1" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_2" > </td>
<td> <input type="number" name="quantity_2" value="0" min="0"> </td>
<td> <input type="number" name="price_2" value="0" min="0"> </td>
<td> <input type="text" name="amount_2" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_3" > </td>
<td> <input type="number" name="quantity_3" value="0" min="0"> </td>
<td> <input type="number" name="price_3" value="0" min="0"> </td>
<td> <input type="text" name="amount_3" disabled value="0"></td>
</tr>
</tbody>
<tfoot>
<td colspan="4"> Sub Total : <output name="SubTotal">0</output> </td>
</tfoot>
</table>
<button type="submit">submit</button>
</form>
You can assign an id to the subtotal cell and change its value on every Mul call.
Something like this :
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
const subTotalField = document.getElementById("subTotal");
subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;
}
<html>
<body>
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td id="subTotal" class="text-end">0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I'm running a code where I must create a function and call it multiple times. I am having trouble calling it more than once.
how to use Mul() function in second table row.
Please help Me.
Thanks.
function Mul() {
var quantity = document.getElementById("quantity").value;
var price = document.getElementById("price").value;
document.getElementById(id).value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="quantity" class="form-control" onkeyup="Mul()">
</td>
<td>
<input type="number" id="price" class="form-control" onkeyup="Mul()">
</td>
<td>
<input type="text" id="amount" class="form-control" disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="quantity" class="form-control">
</td>
<td>
<input type="number" id="price" class="form-control">
</td>
<td>
<input type="text" id="result" class="form-control" disabled>
</td>
</tr>
</tbody>
</table>
Add class name for every input and pass index to Mul() function
try below code.
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control" onkeyup="Mul('0')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount" class="amount form-control" disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control" onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount" class="amount form-control" disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control" onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount" class="amount form-control" disabled>
</td>
</tr>
</tbody>
</table>
Here my HTML table:
<table id="tableSensors" class="table table-sm header-fixed">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Min</th>
<th scope="col" width="10%">Max</th>
<th scope="col" width="10%">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Temperature</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="21" readonly="">
</td>
</tr>
<tr>
<td>Humidity</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="65" readonly="">
</td>
</tr>
<tr>
<td>Pressure</td>
<td>980</td>
<td>1040</td>
<td>
<input class="form-control form-control-sm" type="text" value="1015" readonly="">
</td>
</tr>
</tbody>
</table>
The first row is to implement a filter, so it does not contain useful data.
The last column has an input tag, rather then a plain text.
I want to:
cycle among all rows/column
skipping the first row
pushing data into an array, keeping in mind the difference of the last column
This is the actual code:
function exportTable(id) { // id = #tableSensors
let data = [];
$(id).find('tr').not(':first').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
// do something else
}
But:
it does not skip the first row
I'm not sure how to know if I'm in the last column to use .val() on the input tag
Ideally, I should check in each cell if there is an input tag to retrieve the data in the right way.
UPDATE
Second point fixed by myself:
$(id).find('tr').not(':first').each(function() {
$(this).find('td').each(function() {
if ($(this).find('input').length) data.push($(this).find('input').val().trim());
else data.push($(this).text().trim());
});
});
You need to filter within the tbody otherwise it will ignore the tr within thead since :first pseudo class selector selects the first one among the entire collection.
function exportTable(id) { // id = #tableSensors
let data = [];
$(id).find('tbody tr').not(':first').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
console.log(data);
// do something else
}
function exportTable(id) { // id = #tableSensors
let data = [];
$('table tbody').find('tr').not(':first').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
console.log(data);
// do something else
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableSensors" class="table table-sm header-fixed">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Min</th>
<th scope="col" width="10%">Max</th>
<th scope="col" width="10%">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Temperature</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="21" readonly="">
</td>
</tr>
<tr>
<td>Humidity</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="65" readonly="">
</td>
</tr>
<tr>
<td>Pressure</td>
<td>980</td>
<td>1040</td>
<td>
<input class="form-control form-control-sm" type="text" value="1015" readonly="">
</td>
</tr>
</tbody>
</table>
<span onClick="exportTable();">click</span>
You can use [:first-child][2] as well which will work in both ways since it ignores both tr elements.
function exportTable(id) { // id = #tableSensors
let data = [];
$(id).find('tbody tr:not(:first-child)').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
}
function exportTable(id) { // id = #tableSensors
let data = [];
$('table tbody tr:not(:first-child)').each(function() {
$(this).find('td').each(function() {
data.push($(this).text().trim());
});
});
console.log(data);
// do something else
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableSensors" class="table table-sm header-fixed">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Min</th>
<th scope="col" width="10%">Max</th>
<th scope="col" width="10%">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Temperature</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="21" readonly="">
</td>
</tr>
<tr>
<td>Humidity</td>
<td>0</td>
<td>100</td>
<td>
<input class="form-control form-control-sm" type="text" value="65" readonly="">
</td>
</tr>
<tr>
<td>Pressure</td>
<td>980</td>
<td>1040</td>
<td>
<input class="form-control form-control-sm" type="text" value="1015" readonly="">
</td>
</tr>
</tbody>
</table>
<span onClick="exportTable();">click</span>
This question already has answers here:
Getting value as undefined for input textboxes that are in a table? [duplicate]
(2 answers)
Closed 3 years ago.
I'm trying to get the value of input/textbox in a table. The rest of code works, but I can't seem to get the value from the input that is in the table cell.
I have tried used value, but I get undefined.
This is what I get when I use innerHTML:
<input name="ctl00$cphMain$gridFTA$ctl02$iTxtNumberOfCourses" type="text" value="1" id="cphMain_gridFTA_iTxtNumberOfCourses_0" onblur="getTotal()">
I expect to get the value of each NumberOfCourses input textbox.
function getTotal() {
var amt;
var subTotal = 0;
var FTA = document.getElementById("cphMain_gridFTA");
for (i = 1; i < FTA.rows.length; i++) {
amt = FTA.rows[i].cells[1].value;
alert(amt);
if (isNaN(amt)) {
subTotal += 0;
} else {
subTotal += parseFloat(amt);
}
}
}
<table cellspacing="0" rules="all" border="1" id="cphMain_gridFTA" style="border-collapse:collapse;">
<tr>
<th scope="col">Faculty Name</th>
<th scope="col">Number Of Courses</th>
<th scope="col">Courses (Add Comma-separated Courses)</th>
<th scope="col">Notes</th>
<th scope="col"> </th>
</tr>
<tr>
<td>
<span id="cphMain_gridFTA_txtFacultyName_0">Josh</span>
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl02$iTxtNumberOfCourses" type="text" value="1" id="cphMain_gridFTA_iTxtNumberOfCourses_0" onblur="getTotal()" />
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl02$iTxtCourses" type="text" value="200" id="cphMain_gridFTA_iTxtCourses_0" />
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl02$iTxtNotes" type="text" value="something "
id="cphMain_gridFTA_iTxtNotes_0" style="width:400px;" />
</td>
<td style="width:220px;">
<a id="cphMain_gridFTA_ButtonEdit_0" href="javascript:__doPostBack('ctl00$cphMain$gridFTA$ctl02$ButtonEdit','')">Edit</a>
</td>
</tr>
<tr>
<td>
<span id="cphMain_gridFTA_txtFacultyName_1">Mary</span>
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl03$iTxtNumberOfCourses" type="text" value="2" id="cphMain_gridFTA_iTxtNumberOfCourses_1" onblur="getTotal()" />
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl03$iTxtCourses" type="text" value="300, 500" id="cphMain_gridFTA_iTxtCourses_1" />
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl03$iTxtNotes" type="text" value="test "
id="cphMain_gridFTA_iTxtNotes_1" style="width:400px;" />
</td>
<td style="width:220px;">
<a id="cphMain_gridFTA_ButtonEdit_1" href="javascript:__doPostBack('ctl00$cphMain$gridFTA$ctl03$ButtonEdit','')">Edit</a>
</td>
</tr>
</table>
The issue is you are trying to access the value of the <input> by reading the value of the <td>. This is not correct. You need to get the <input> element from the <td> and get the value of that.
You can use querySelector to find the <input> and pull the value from there.
amt = FTA.rows[i].cells[1].querySelector('input').value
Beware: your cell contains an html element, that is the input within. Thus you can't simply access the value, you need to grab the input and then get the value.
function getTotal() {
var amt;
var subTotal = 0;
var FTA = document.getElementById("cphMain_gridFTA");
for (i = 1; i < FTA.rows.length; i++) {
var input = FTA.rows[i].cells[1].getElementsByTagName('input')[0]
amt = input.value;
if (isNaN(amt)) {
subTotal += 0;
} else {
subTotal += parseFloat(amt);
}
}
return subTotal;
}
<table cellspacing="0" rules="all" border="1" id="cphMain_gridFTA" style="border-collapse:collapse;">
<tr>
<th scope="col">Faculty Name</th>
<th scope="col">Number Of Courses</th>
<th scope="col">Courses (Add Comma-separated Courses)</th>
<th scope="col">Notes</th>
<th scope="col"> </th>
</tr>
<tr>
<td>
<span id="cphMain_gridFTA_txtFacultyName_0">Josh</span>
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl02$iTxtNumberOfCourses" type="text" value="1" id="cphMain_gridFTA_iTxtNumberOfCourses_0" onblur="getTotal()" />
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl02$iTxtCourses" type="text" value="200" id="cphMain_gridFTA_iTxtCourses_0" />
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl02$iTxtNotes" type="text" value="something "
id="cphMain_gridFTA_iTxtNotes_0" style="width:400px;" />
</td>
<td style="width:220px;">
<a id="cphMain_gridFTA_ButtonEdit_0" href="javascript:__doPostBack('ctl00$cphMain$gridFTA$ctl02$ButtonEdit','')">Edit</a>
</td>
</tr>
<tr>
<td>
<span id="cphMain_gridFTA_txtFacultyName_1">Mary</span>
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl03$iTxtNumberOfCourses" type="text" value="2" id="cphMain_gridFTA_iTxtNumberOfCourses_1" onblur="getTotal()" />
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl03$iTxtCourses" type="text" value="300, 500" id="cphMain_gridFTA_iTxtCourses_1" />
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl03$iTxtNotes" type="text" value="test "
id="cphMain_gridFTA_iTxtNotes_1" style="width:400px;" />
</td>
<td style="width:220px;">
<a id="cphMain_gridFTA_ButtonEdit_1" href="javascript:__doPostBack('ctl00$cphMain$gridFTA$ctl03$ButtonEdit','')">Edit</a>
</td>
</tr>
</table>
<button onclick="alert(getTotal())">Total</button>
Try this
you need to address the field by name - since your backend adds all sorts of stuff, we can use the $= selector for "ends with"
you need to use a selector that takes the fields and not the cells
You COULD have used
amt = FTA.rows[i].cells[1].querySelector("input").value;
but this is more elegant
function getTotal() {
var amt;
var subTotal = 0;
document.getElementById("cphMain_gridFTA") // the table
.querySelectorAll("[name$=iTxtNumberOfCourses]") // the inputs as array using $= name ending on
.forEach(el => subTotal += +el.value); // sum
alert(subTotal);
}
<table cellspacing="0" rules="all" border="1" id="cphMain_gridFTA" style="border-collapse:collapse;">
<tr>
<th scope="col">Faculty Name</th>
<th scope="col">Number Of Courses</th>
<th scope="col">Courses (Add Comma-separated Courses)</th>
<th scope="col">Notes</th>
<th scope="col"> </th>
</tr>
<tr>
<td>
<span id="cphMain_gridFTA_txtFacultyName_0">Josh</span>
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl02$iTxtNumberOfCourses" type="text" value="1" id="cphMain_gridFTA_iTxtNumberOfCourses_0" onblur="getTotal()" />
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl02$iTxtCourses" type="text" value="200" id="cphMain_gridFTA_iTxtCourses_0" />
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl02$iTxtNotes" type="text" value="something "
id="cphMain_gridFTA_iTxtNotes_0" style="width:400px;" />
</td>
<td style="width:220px;">
<a id="cphMain_gridFTA_ButtonEdit_0" href="javascript:__doPostBack('ctl00$cphMain$gridFTA$ctl02$ButtonEdit','')">Edit</a>
</td>
</tr>
<tr>
<td>
<span id="cphMain_gridFTA_txtFacultyName_1">Mary</span>
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl03$iTxtNumberOfCourses" type="text" value="2" id="cphMain_gridFTA_iTxtNumberOfCourses_1" onblur="getTotal()" />
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl03$iTxtCourses" type="text" value="300, 500" id="cphMain_gridFTA_iTxtCourses_1" />
</td>
<td>
<input name="ctl00$cphMain$gridFTA$ctl03$iTxtNotes" type="text" value="test "
id="cphMain_gridFTA_iTxtNotes_1" style="width:400px;" />
</td>
<td style="width:220px;">
<a id="cphMain_gridFTA_ButtonEdit_1" href="javascript:__doPostBack('ctl00$cphMain$gridFTA$ctl03$ButtonEdit','')">Edit</a>
</td>
</tr>
</table>
To get an array of values use
// array of values
var FTA = [...document.getElementById("cphMain_gridFTA") // the table
.querySelectorAll("[name$=iTxtNumberOfCourses]")] // the inputs as array using $= name ending on
.map(el => +el.value); // map
console.log(FTA); // this array can be further reduced to a total
I have this table I'm working on.
When you check the checkboxes on each table, it adds to another table specified below but to sum the values of each checkboxes checked is the problem because if i check a checkbox, it would sum the wrong value and show and if i uncheck and check again, it would still adds to the total without removing the previous uncheck value from the total, but adding to another table below is working fine, its only the sum of the total value that gives the problem
Below is my html table
<table class="table table-hover">
<thead style="background-color: rgb(25, 96, 143); color: #fff;" id="feesTbl">
<tr>
<th></th>
<th>Fee Name</th>
<th>Fee Amount</th>
</tr>
</thead>
<tbody>
<form method="post" action="">
<tr data-index="1">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
<tr data-index="2">
<td>
<input type="checkbox" class="checky" name="feeids" value="100000" data-check-name="PowerHouse Water Cooper">
</td>
<td>
PowerHouse Water Cooper
</td>
<td>
100000
</td>
</tr>
<tr data-index="3">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
<tr data-index="4">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
<tr data-index="5">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
</form>
</tbody>
</table>
<div id="showTotal">
<form action="" method="POST">
<input type="text" id="total" class="form-control" />
</form>
</div>
<table id="tbl2">
</table>
Below is the jquery code
// $("#showTotal").hide();
var total = 0;
var $checky = $("input[type=checkbox].checky");
$checky.click(function() {
//calculateTotal();
if ($(this).is(":checked")) {
calculateTotal();
$(this).closest("tr").clone().appendTo("#tbl2");
} else {
var index = $(this).closest("tr").attr("data-index");
var findRow = $("#tbl2 tr[data-index='" + index + "']");
findRow.remove();
}
});
function calculateTotal() {
//if($(this).is(":checked")) {
$checky.each(function() {
total = parseFloat(total) + parseFloat($(this).val());
// if(total != 0) {
// $("#showTotal").show();
// }else {
// $("#showTotal").hide();
// }
$("#total").val("N" + total);
});
//}
}
Is this what you want?
I've some of your jquery around.
function calculateTotal() {
//if($(this).is(":checked")) {
var total = 0;
$checky.filter(":checked").each(function() {
total = parseFloat(total) + parseFloat($(this).val());
// if(total != 0) {
// $("#showTotal").show();
// }else {
// $("#showTotal").hide();
// }
});
$("#total").val("N" + total);
}
demo
// $("#showTotal").hide();
var $checky = $("input[type=checkbox].checky");
$checky.click(function() {
//calculateTotal();
if ($(this).is(":checked")) {
calculateTotal();
$(this).closest("tr").clone().appendTo("#tbl2");
} else {
var index = $(this).closest("tr").attr("data-index");
var findRow = $("#tbl2 tr[data-index='" + index + "']");
calculateTotal();
findRow.remove();
}
});
function calculateTotal() {
//if($(this).is(":checked")) {
var total = 0;
$checky.filter(":checked").each(function() {
total = parseFloat(total) + parseFloat($(this).val());
// if(total != 0) {
// $("#showTotal").show();
// }else {
// $("#showTotal").hide();
// }
});
$("#total").val("N" + total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
<thead style="background-color: rgb(25, 96, 143); color: #fff;" id="feesTbl">
<tr>
<th></th>
<th>Fee Name</th>
<th>Fee Amount</th>
</tr>
</thead>
<tbody>
<form method="post" action="">
<tr data-index="1">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
<tr data-index="2">
<td>
<input type="checkbox" class="checky" name="feeids" value="100000" data-check-name="PowerHouse Water Cooper">
</td>
<td>
PowerHouse Water Cooper
</td>
<td>
100000
</td>
</tr>
<tr data-index="3">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
<tr data-index="4">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
<tr data-index="5">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
</form>
</tbody>
</table>
<div id="showTotal">
<form action="" method="POST">
<input type="text" id="total" class="form-control" />
</form>
</div>
<table id="tbl2">
</table>