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>
开发者_C百科 </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")
精彩评论