Develop Reference

Monitor the changes in table using JavaScript or HTML

I want to change the total price when the count or unit price of the products are changed on the website. I know I should use the onChange function, but I have no idea about how to write the JavaScript code.
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true" >
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true" >
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true" >
<input id="productCount" type="text" name="countList" onchange="update()" class="layui-input count"
th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true" >
<input id="normalPrice" type="text" name="priceList" onchange="update()" class="layui-input price"
th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price"
th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
<a href="javascript:void(0)" class="delBtn redType" onclick='delColumns(this)'>Del</a>
</td>
</tr>
</tbody>
</table>
I hope that the totalPrice = count*price could refresh whenever the user changes one of those values.

You can easily monitor the pointed input fields (#productCount and #normalPrice) and change the value of #total according to it. In the code below, I use the input event and I'm not using inline event handlers, but rather the function addEventListener() (know why).
const productCountInput = document.querySelector('#productCount');
const productPriceInput = document.querySelector('#normalPrice');
const totalPriceInput = document.querySelector('#total');
function updateTotalPrice() {
totalPriceInput.value = (parseFloat(productCountInput.value) * parseFloat(productPriceInput.value)) || 0;
}
productCountInput.addEventListener('input', updateTotalPrice);
productPriceInput.addEventListener('input', updateTotalPrice);
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true">
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true">
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true">
<input id="productCount" type="text" name="countList" class="layui-input count" th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true">
<input id="normalPrice" type="text" name="priceList" class="layui-input price" th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price" th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
Del
</td>
</tr>
</tbody>
</table>

How to sum values from form text field array using jquery onlick function

I am new to jQuery and javascript, I need a help on how to do computation on form text field in an array. See below sample code;
<head lang="en">
<meta chartaxt="UTF-8">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<title>Sample salary computation</title>
</head>
<body>
<form method="POST" name="regis" id="regis">
<table align="center" border="1" width="200">
<tr>
<th>Staff ID</th>
<th>Salary</th>
<th>Total Tax</th>
<th>Total Net Pay</th>
</tr>
<!--Staff 1-->
<tr data-id="STAFF/2016/001">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/002">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/003">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
</table>
</form>
</body>
I want a jquery script that can sum total = (salary + tax) for each staff using onclick button

$("#submit").click(function() {
$("tr").each(function() {
if ($(this).find(".salary")) {
var salary = parseInt($(this).find(".salary").val(), 10)
var tax = parseInt($(this).find(".tax").val(), 10)
$(this).find(".total").val(salary + tax)
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" name="regis" id="regis">
<table align="center" border="1" width="200">
<tr>
<th>Staff ID</th>
<th>Salary</th>
<th>Total Tax</th>
<th>Total Net Pay</th>
</tr>
<!--Staff 1-->
<tr data-id="STAFF/2016/001">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/002">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/003">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
</table>
<button id="submit" type="button">Submit</button>

You can use selector to get or set the val with iQuery. Something like this
$("button").click(function(){
var total = $("input[name=salary]").val()+$("input[name=tax]").val();
$("input[name=total]").val(tatal);
});

Here is one solution:
http://codepen.io/tryggvigy/pen/BzAqGR
var sums = []
$('input[type=button]').click(function() {
var salaries = $('.salary')
.toArray()
.map(function(salary) { return salary.value })
var taxes = $('.tax')
.toArray()
.map(function(tax) { return tax.value})
sums = salaries.map(function(salary, i) {
return parseInt(salary) + parseInt(taxes[i])
})
alert(document.sums)
})

Javascript Form calculator

When I type values in the far right text boxes, then click "click to calculate" i want the values of all the text boxes to add up and display. I cannot figure it out. when i click the click to calculate button, it does nothing. not a thing!
<SCRIPT>
function add()
{
var a = document.getElementById("fscf_field4_8").value;
var b = document.getElementById("fscf_field4_10").value;
var c = document.getElementById("fscf_field4_12").value;
var d = document.getElementById("fscf_field4_14").value;
var e = document.getElementById("fscf_field4_16").value;
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}
</script>
<table>
<tr>
<td>
<div id="FSContact4" style="width:375px;">
<form action="/payment/#FSContact4" id="fscf_form4" method="post">
<input type="hidden" name="fscf_submitted" value="0">
<input type="hidden" name="fs_postonce_4" value="99193296484a8d52d2b9579199ca2f0c,1384214867">
<input type="hidden" name="si_contact_action" value="send">
<input type="hidden" name="form_id" value="4">
<div id="fscf_required4">
<span style="text-align:left;">*</span> <span style="text-align:left;">indicates required field</span>
</div>
<input type="hidden" name="mailto_id" value="1">
<div id="fscf_div_clear4_4" style="clear:both;">
<div id="fscf_div_field4_4" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_4" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_4">Company Name<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_4" name="company-name" value="">
</div>
</div>
</div>
<div id="fscf_div_clear4_5" style="clear:both;">
<div id="fscf_div_field4_5" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_5" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_5">Person Doing the Transaction<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_5" name="person-doing-the-transaction" value="">
</div>
</div>
</div>
<div id="fscf_div_clear4_6" style="clear:both;">
<div id="fscf_div_field4_6" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_6" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_6">email<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_6" name="email01" value="">
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="100%" cellpadding="3" cellspacing="3">
<tr>
<td>Invoice Number</td>
<td>Amount (USD)</td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_7 name="Invoice Number 1"></td>
<td><input type="text" id="fscf_field4_8 name="Amount 1"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_9 name="Invoice Number 2"></td>
<td><input type="text" id="fscf_field4_10 name="Amount 2"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_11 name="Invoice Number 3"></td>
<td><input type="text" id="fscf_field4_12 name="Amount 3"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_13 name="Invoice Number 4"></td>
<td><input type="text" id="fscf_field4_14 name="Amount 4"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_15 name="Invoice Number 5"></td>
<td><input type="text" id="fscf_field4_16 name="Amount 5"></td>
</tr>
<tr>
<td><input type="button" id="click" value="Click to Calculate" onclick="add();"></td>
<td><input type="text" id="fscf_field4_19"></td>
</tr>
</table>
<div id="fscf_submit_div4" style="text-align:left; padding-top:2px;">
<input type="submit" id="fscf_submit4" style="cursor:pointer; margin:0;" value="Submit">
</div>
</form>
</div>
</tr>
</td>
</table>

You are not closing the id value of your table properly.
Error:<input type="text" id="fscf_field4_7 name="Invoice Number 1">
There is no closing Quotes for id value(fscf_field4_7)
above. try to close id value if all TextBox's properly.
Replace your table with following:
<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="100%" cellpadding="3" cellspacing="3">
<tr>
<td>Invoice Number</td>
<td>Amount (USD)</td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_7" name="Invoice Number 1"/></td>
<td><input type="text" id="fscf_field4_8" name="Amount 1"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_9" name="Invoice Number 2"></td>
<td><input type="text" id="fscf_field4_10" name="Amount 2"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_11" name="Invoice Number 3"></td>
<td><input type="text" id="fscf_field4_12" name="Amount 3"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_13" name="Invoice Number 4"></td>
<td><input type="text" id="fscf_field4_14" name="Amount 4"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_15" name="Invoice Number 5"></td>
<td><input type="text" id="fscf_field4_16" name="Amount 5"></td>
</tr>
<tr>
<td><input type="button" id="click" value="Click to Calculate" onclick="add()"></td>
<td><input type="text" id="fscf_field4_19"></td>
</tr>
</table>

To start with, you forgot to close the quotation marks of all the IDs of inputs. Try doing it.
i.e.
<input type="text" id="fscf_field4_8 name="Amount 1">
needs to be:
<input type="text" id="fscf_field4_8" name="Amount 1">
Also you need to add parseInt() when you parsing string's int value. below i put the new code snippet
Confirmation: Just tried your code with proper quotation marks and intParse(),it works
Your final code for integer parse:
<SCRIPT>
function add()
{
var a = parseInt(document.getElementById("fscf_field4_8").value);
var b = parseInt(document.getElementById("fscf_field4_10").value);
var c = parseInt(document.getElementById("fscf_field4_12").value);
var d = parseInt(document.getElementById("fscf_field4_14").value);
var e = parseInt(document.getElementById("fscf_field4_16").value);
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}
</script>

Please check this working sample http://jsfiddle.net/6AYFg/
Properly close all your tags and attributes first
parse values from all elements to int
<td><input type="text" id="fscf_field4_7 name="Invoice Number 1"></td>
function add()
{
var a = document.getElementById("fscf_field4_8").value;
var b = document.getElementById("fscf_field4_10").value;
var c = document.getElementById("fscf_field4_12").value;
var d = document.getElementById("fscf_field4_14").value;
var e = document.getElementById("fscf_field4_16").value;
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}

Javascript Calculation - If Statement

I would like to display a different option for different choices.
If MenuNo1 (textinput) equal either 1,2,3,4 or 5 - then the value of menuPrice1 should be R70.00.
If MenuNo1(textinput) equal either 8,9,12 - then the value of menuPrice1 should be R85.00.
If MenuNo1 (textinput) equal 11 - then the value of menuPrice1 should be R105.00.
I have tried doing it this way: However nothing appears in the MenuPrice1 field? There are also no errors in the console.
function calcMenu(form) {
var MenuPrice1 = (+form.MenuPrice1.value);
var MenuNo1 = (+form.MenuNo1.value);
if ([1,2,3,4,5].indexOf(+form.MenuNo1.value) != -1) {
MenuPrice1.value = "70";
}
else if ([8,9,12].indexOf(+form.MenuNo1.value) != -1) {
MenuPrice1.value = "85";
}
else if (+form.MenuNo1.value == 11) {
MenuPrice1.value = "105";
}
}
HTML
<form id="quote" action="" method="get">
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function($) {
jQuery('#quote').change(function() {
doTotal(this)
});
});
// ]]>
</script>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function($) {
jQuery('#quote').change(function() {
calcMenu(this)
});
});
// ]]>
</script>
<table width="532" border="1" cellspacing="1" cellpadding="0.5">
<tbody>
<tr>
<th scope="col" width="70">
<div align="center">
Date
</div></th>
<th scope="col" width="158">
<div align="center">
Amount of Delegates ½ Day Conference # R 240 pp
</div></th>
<th width="112">
<div align="center">
Amount of Delegates Full Day Conference # R 260 pp
</div></th>
<th width="112">
<div align="center">
Menu No
</div></th>
<th width="112">
<div align="center">
Price pp for Menu (1-7: R70, 8-10 R85, 11: R105, 12: R85)
</div></th>
<th width="134">
<div align="center">
Total for the day
</div></th>
</tr>
<tr>
<td>
<div align="center">
<input type="text" name="date1" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="halfday1" size="15" maxlength="10" />
</div></td>
<td>
<div align="center">
<input type="text" name="fullday1" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuNo1" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuPrice1" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="total1" size="15" />
</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="text" name="date2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="halfday2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="fullday2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuNo2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuPrice2" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="total2" size="15" />
</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="text" name="date3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="halfday3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="fullday3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuNo3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="MenuPrice3" size="15" />
</div></td>
<td>
<div align="center">
<input type="text" name="total3" size="15" />
</div></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</form>

You have var MenuPrice1 = (+form.MenuPrice1.value); and are doing MenuPrice1.value = later on.
Also there is a cleaner way to do this that would make it easier to maintain in the future too.
Fiddle: http://jsfiddle.net/8q7Fh/3
var prices = [
{
values: [1,2,3,4,5],
price: 'R70.00'
},
{
values: [8,9,12],
price: 'R85.00'
},
{
values: [11],
price: 'R105.00'
}
];
function calcMenu(form)
{
var i, searchValue = parseInt(form.MenuNo1.value);
form.MenuPrice1.value = '';
for (i in prices)
{
if ($.inArray(searchValue, prices[i].values) != -1)
{
form.MenuPrice1.value = prices[i].price;
}
}
}
Notes: You are currently missing prices for when the values are either 6, 7 and 10. For now I've set it so that it will clear the value in the MenuPrice if it cannot find a definite price. Something to think about!

Calculate dynamic hidden field in jQuery

Goal: I need to auto-calculate a "subtotal" field based off clicking a yes/no radio button.
There are two issues I am having
Being able to initiate the "recalc" function based off clicking the yes/no radio button
Being able to elimate relying on the "Unplug" column, which I would like to get rid of.
The 'Yes/No' values are '1/0' respectively. The formula is (Watts on Standby * (1 or 0)).
Test example: http://www.ppleasysavings.com/testsurvey/
Here is the HTML
<form method="post" action="" id="surveyForm">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<th><div align="center">Home Appliance</div></th>
<th><div align="center">Test device?</div></th>
<th><div align="center">Watts on Standby</div></th>
<th><div align="center">Unplug when not used?</div></th>
<th><div align="center">Unplug</div></th>
<th><div align="center">Watts Saved!</div></th>
</thead>
<tr>
<td>50" Plasma TV (191-474 watts)</td>
<div class="option-group">
<td><div align="center">Yes
<input name="didTest1" type="radio" value="1" checked/>
No
<input name="didTest1" type="radio" value="0" />
</div></td>
<td><div align="center">
<input name="standbyWatts1" id="standbyWatts1" value="0.75" size="7" maxlength="8" type="text" style="text-align:center;" class="required"/>
</div></td>
</div>
<td><div align="center">Yes
<input name="didUnplug1" id="didUnplug1" type="radio" value="1" checked/>
No
<input name="didUnplug1" id="didUnplug1" type="radio" value="0" />
</div></td>
<td id="unplug_item_1"> 1 </td>
<td><div align="center">
<input name="wattsSaved1" id="wattsSaved1" value="0.75" size="7" type="text" style="text-align:center;" readonly="readonly" />
</div></td>
</tr>
<tr>
<td>Microwave Oven (1440 watts)</td>
<div class="option-group">
<td><div align="center"> Yes
<input name="didTest2" type="radio" value="1" checked/>
No
<input name="didTest2" type="radio" value="0" />
</div></td>
<td><div align="center">
<input name="standbyWatts2" id="standbyWatts2" value="20.00" size="7" maxlength="8" type="text" style="text-align:center;" class="required"/>
</div></td>
</div>
<td><div align="center">Yes
<input name="didUnplug2" id="didUnplug2" type="radio" value="1" />
No
<input name="didUnplug2" id="didUnplug2" type="radio" value="0" checked/>
</div></td>
<td id="unplug_item_2"> 0 </td>
<td><div align="center">
<input name="wattsSaved2" id="wattsSaved2" value="0.00" size="7" type="text" style="text-align:center;" readonly="readonly" />
</div></td>
</tr>
<tr>
<td>Computer (250-400 watts)</td>
<div class="option-group">
<td><div align="center"> Yes
<input name="didTest3" type="radio" value="1" checked/>
No
<input name="didTest3" type="radio" value="0" />
</div></td>
<td><div align="center">
<input name="standbyWatts3" id="standbyWatts3" value="9.00" size="7" maxlength="8" type="text" style="text-align:center;" class="required"/>
</div></td>
</div>
<td><div align="center"> Yes
<input name="didUnplug3" id="didUnplug3" type="radio" value="1" checked/>
No
<input name="didUnplug3" id="didUnplug3" type="radio" value="0" />
</div></td>
<td id="unplug_item_3"> 1 </td>
<td><div align="center">
<input name="wattsSaved3" id="wattsSaved3" value="9.00" size="7" type="text" style="text-align:center;" readonly="readonly" />
</div></td>
</tr>
<tfoot>
<td colspan="5" align="right"><div align="right"><b>Total Watts Saved!</b></div></td>
<td><div align="center">
<input type="text" readonly="readonly" maxlength="8" size="7" value="9.75" id="grandTotal" name="grandTotal">
</div></td>
</tfoot>
</table>
<div align="right">
<input name="reset" type="reset" value="Reset" />
<input type="submit" name="scodeEntry" class="button" value="Submit Results" onclick="return submitSurvey();"/>
</div>
</form>
Here is the jQuery
//Auto calculation
var bIsFirebugReady = (!!window.console && !!window.console.log);
$(document).ready(
function (){
// bind the recalc function to the quantity fields
$("input[name^=standbyWatts]").bind("keyup", recalc);
$("input[name^=didUnplug]").bind("click", recalc);
// run the calculation function now
recalc();
}
);
// used for the survey page
function recalc(){
$("[id^=wattsSaved]").calc(
// the equation to use for the calculation
"sbw * unplug",
// define the variables used in the equation, these can be a jQuery object
{
sbw: $("input[name^=standbyWatts]"),
unplug: $("[id^=unplug_item_]")
},
// define the formatting callback, the results of the calculation are passed to this function
function (s){
// return the number as a integer
return s.toFixed(2);
},
// define the finish callback, this runs after the calculation has been complete
function ($this){
// sum the total of the $("[id^=total_item]") selector
var sum = $this.sum();
$("#grandTotal").val(
// round the results to 0 digits
sum.toFixed(2)
);
}
);

Some browsers won't like the extra comma here:
unplug: $("[id^=unplug_item_]"),
Otherwise, I'm seeing the calc function fire when the checkbox selection changes.
As far as removing the unplug column, you can get the value of the selected checkbox using something similar to your bind query:
$("input[name^=didUnplug]:checked")