Develop Reference

How to get sum of input values using Javascript?

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>

How to get total sum from input values using Javascript?

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>

InnerHTML returning Input/Textbox instead of value? [duplicate]

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

Using javascript to calculate the total cost of an order based on quantity of products in html form

Trying to use javascript to calculate the total cost of an order using the quantity inputted through the form in html but the total is not displaying in the input box. Been messing around with it for a few days and yesterday was showing NaN but now the box stays completely blank. It's all within a singlular webpage as a pratical assessment for school and am just using the script tag.
See the js below
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = document.getElementByID("quantityCappuccino").value;
var quantityEspresso = document.getElementByID("quantityEspresso").value;
var quantityLatte = document.getElementByID("quantityLatte").value;
var quantityIced = document.getElementByID("quantityIced").value;
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
//print value to orderTotal
document.getElementById("orderTotal").value=total;
}
And here is the html for the form
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>

I found two errors:
(1) In your second four var statements, it's getElementById not getElementByID (don't all-cap "Id").
(2) Your first <input> tag has the id name misspelled. It should be quantityCappuccino (identical to the name attribute).
After fixing those, the code worked like a charm.
NOTE: It took me seconds to figure this out because the error console (In FireFox, strike the F12 key to open it) reported the problems. That console is your friend.

Try this !
$("#orderTotal").click(function () {
calculatePrice();
});
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = $("#quantityCappucino").val();
var quantityEspresso = $("#quantityEspresso").val();
var quantityLatte = $("#quantityLatte").val();
var quantityIced = $("#quantityIced").val();
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
console.log(total);
//print value to orderTotal
$("#orderTotal").val(total);
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>
</td>
</tr>
</form>
</table>
</body>
</html>

Checkbox JavaScript does not update values

I have a table with rows of textboxes as inputs that hold numbers/hours with css .hours. I am trying to get the table to update totals when the row is deleted checkbox is checked/clicked.
How to Update the totals in the row & col at the End? when the delete row checkbox is checked.
2 steps: I zero out the values in the deleted row, and then want to update the new totals.
JS fiddle with HTML
// Call this function, When CheckBox with css .deleteRowis clicked
$('#Maintable').on('click', '.deleteRow', function ()
{
if ($(this).is(":checked")) {
var row = $(this).closest('tr').css({ 'color': 'red' });
var hours = row.find('.hours');
$.each(hours, function (index, item) {
if ($(this).val()) { // if there is a value
$(this).val('0');
// Total the rows does not work??
HoursChangedFunction($(this));
}
});
} // :checked ends
// when the row is deleted from the checkbox, find it and call this function
// 1) First make all .hours 0, 2) and then redo the totals
var HoursChangedFunction = function () {
var columnIndex = $(this).closest('td').index();
var row = $(this).closest('tr');
var hours = row.find('.hours');
var rowTotal = 0;
$.each(hours, function (index, item) {
rowTotal += Number($(this).val());
});
row.children('td.rowtotal').text(rowTotal.toFixed(2));
var columnTotal = 0;
var grandTotal = 0;
var rows = $('#Maintable tr');
$.each(rows, function (index, item) {
columnTotal += Number($(this).children('td').eq(columnIndex).children('.hours').val());
grandTotal += Number($(this).children('.rowtotal').text());
});
footer.eq(columnIndex).text(columnTotal.toFixed(2));
total.text(grandTotal.toFixed(2));
};

Because you have a lot of IDs you may avoid HoursChangedFunction.
In order to get the corresponding cell in the current col you can use the eq method
Moreover, you can use .text( function ) to simplify the task.
You can simplify the event handler from:
$('#Maintable').on('click', '.deleteRow', function ()
to:
$('#Maintable').on('change', '.deleteRow:checked', function () {
because inside the handler you execute the logic only when the checkbox is checked.
The snippet:
$('#Maintable').on('change', '.deleteRow:checked', function () {
var row = $(this).closest('tr').css({'color': 'red'});
$('#grandtotal').text(function(idx, txt) {
return (+txt - +row.find('.rowtotal').text()).toFixed(2);
});
row.find('.rowtotal').text('0.00');
row.find('.hours').each( function (index, item) {
if (item.value != '0.00') {
$('#Maintable').closest('table').find('tfoot tr td').eq(index + 2).text(function(idx, txt) {
return (+txt - +item.value).toFixed(2);
});
item.value = '0.00';
}
});
});
.hours {
width: 50px;
box-sizing: border-box;
border: solid 1px #d9e1e4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Task</th>
<th>Code</th>
<th>day1</th>
<th>day2</th>
<th>dy3</th>
<th>day4</th>
<th>day5</th>
<th>day6</th>
<th>day7</th>
<th>Total</th>
<th>Del</th>
</tr>
</thead>
<tbody id="Maintable">
<tr>
<td>
<span class="project">Project 1</span>
</td>
<td>
<span class="timecode">code 1A</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="2.50">
</td>
<td>
<input class="hours" type="text" value="4.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">6.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
<tr>
<td>
<span class="project">Project 2</span>
</td>
<td>
<input type="hidden" name="Records.Index" value="1">
<span class="timecode">code 2B</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="4.50">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">4.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
<tr>
<td>
<span class="project">Project 3</span>
</td>
<td>
<span class="timecode">code 2C</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.50">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" ype="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">0.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>0.00</td>
<td>7.50</td>
<td>4.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td id="grandtotal">11.50</td>
</tr>
</tfoot>
</table>