Calculate dynamic hidden field in jQuery
<p><strong>Goal:</strong> I need to auto-calculate a "subtotal" field based off clicking a yes/no radio button.</p>

<p><strong>There are two issues I am having</strong></p>

<ol>
<li>Being able to initiate the "recalc" function based off clicking the yes/no radio button</li>
<li>Being able to elimate relying on the "Unplug" column, which I would like to get rid of.</li>
</ol>

<p>The 'Yes/No' values are '1/0' respectively. The formula is (Watts on Standby * (1 <em>or</em> 0)).</p>

<p><strong>Test example:</strong> <a href="http://www.ppleasysavings.com/testsurvey/" rel="nofollow">http://www.ppleasysavings.com/testsurvey/</a></p>

<p>Here is the HTML</p>

<pre><code> &lt;form method="post" action="" id="surveyForm"&gt;
    &lt;table width="100%" border="1" cellspacing="0" cellpadding="0"&gt;
      &lt;thead&gt;
      &lt;th&gt;&lt;div align="center"&gt;Home Appliance&lt;/div&gt;&lt;/th&gt;
        &lt;th&gt;&lt;div align="center"&gt;Test device?&lt;/div&gt;&lt;/th&gt;
        &lt;th&gt;&lt;div align="center"&gt;Watts on Standby&lt;/div&gt;&lt;/th&gt;
        &lt;th&gt;&lt;div align="center"&gt;Unplug when not used?&lt;/div&gt;&lt;/th&gt;
        &lt;th&gt;&lt;div align="center"&gt;Unplug&lt;/div&gt;&lt;/th&gt;
        &lt;th&gt;&lt;div align="center"&gt;Watts Saved!&lt;/div&gt;&lt;/th&gt;
        &lt;/thead&gt;
      &lt;tr&gt;
        &lt;td&gt;50&amp;quot; Plasma TV (191-474 watts)&lt;/td&gt;
        &lt;div class="option-group"&gt;
          &lt;td&gt;&lt;div align="center"&gt;Yes
              &lt;input name="didTest1" type="radio" value="1" checked/&gt;
              No
              &lt;input name="didTest1" type="radio" value="0" /&gt;
            &lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div align="center"&gt;
              &lt;input name="standbyWatts1" id="standbyWatts1" value="0.75" size="7" maxlength="8" type="text" style="text-align:center;" class="required"/&gt;
            &lt;/div&gt;&lt;/td&gt;
        &lt;/div&gt;
        &lt;td&gt;&lt;div align="center"&gt;Yes
            &lt;input name="didUnplug1"  id="didUnplug1" type="radio" value="1" checked/&gt;
            No
            &lt;input name="didUnplug1"  id="didUnplug1" type="radio" value="0" /&gt;
          &lt;/div&gt;&lt;/td&gt;
        &lt;td id="unplug_item_1"&gt; 1 &lt;/td&gt;
        &lt;td&gt;&lt;div align="center"&gt;
            &lt;input name="wattsSaved1" id="wattsSaved1" value="0.75" size="7" type="text" style="text-align:center;" readonly="readonly" /&gt;
          &lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Microwave Oven (1440 watts)&lt;/td&gt;
        &lt;div class="option-group"&gt;
          &lt;td&gt;&lt;div align="center"&gt; Yes
              &lt;input name="didTest2" type="radio" value="1" checked/&gt;
              No
              &lt;input name="didTest2" type="radio" value="0" /&gt;
            &lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div align="center"&gt;
              &lt;input name="standbyWatts2" id="standbyWatts2" value="20.00" size="7" maxlength="8" type="text" style="text-align:center;" class="required"/&gt;
            &lt;/div&gt;&lt;/td&gt;
        &lt;/div&gt;
        &lt;td&gt;&lt;div align="center"&gt;Yes
            &lt;input name="didUnplug2"  id="didUnplug2" type="radio" value="1" /&gt;
            No
            &lt;input name="didUnplug2"  id="didUnplug2" type="radio" value="0" checked/&gt;
          &lt;/div&gt;&lt;/td&gt;
        &lt;td id="unplug_item_2"&gt; 0 &lt;/td&gt;
        &lt;td&gt;&lt;div align="center"&gt;
            &lt;input name="wattsSaved2" id="wattsSaved2" value="0.00" size="7" type="text" style="text-align:center;" readonly="readonly" /&gt;
          &lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Computer (250-400 watts)&lt;/td&gt;
        &lt;div class="option-group"&gt;
          &lt;td&gt;&lt;div align="center"&gt; Yes
              &lt;input name="didTest3" type="radio" value="1" checked/&gt;
              No
              &lt;input name="didTest3" type="radio" value="0" /&gt;
            &lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div align="center"&gt;
              &lt;input name="standbyWatts3" id="standbyWatts3" value="9.00" size="7" maxlength="8" type="text" style="text-align:center;" class="required"/&gt;
            &lt;/div&gt;&lt;/td&gt;
        &lt;/div&gt;
        &lt;td&gt;&lt;div align="center"&gt; Yes
            &lt;input name="didUnplug3"  id="didUnplug3" type="radio" value="1" checked/&gt;
            No
            &lt;input name="didUnplug3"  id="didUnplug3" type="radio" value="0" /&gt;
          &lt;/div&gt;&lt;/td&gt;
        &lt;td id="unplug_item_3"&gt; 1 &lt;/td&gt;
        &lt;td&gt;&lt;div align="center"&gt;
            &lt;input name="wattsSaved3" id="wattsSaved3" value="9.00" size="7" type="text" style="text-align:center;" readonly="readonly" /&gt;
          &lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tfoot&gt;
      &lt;td colspan="5" align="right"&gt;&lt;div align="right"&gt;&lt;b&gt;Total Watts Saved!&lt;/b&gt;&lt;/div&gt;&lt;/td&gt;
        &lt;td&gt;&lt;div align="center"&gt;
            &lt;input type="text" readonly="readonly" maxlength="8" size="7" value="9.75" id="grandTotal" name="grandTotal"&gt;
          &lt;/div&gt;&lt;/td&gt;
        &lt;/tfoot&gt;
    &lt;/table&gt;
    &lt;div align="right"&gt;
      &lt;input name="reset" type="reset" value="Reset" /&gt;
      &lt;input type="submit" name="scodeEntry" class="button" value="Submit Results" onclick="return submitSurvey();"/&gt;
    &lt;/div&gt;
  &lt;/form&gt;
</code></pre>

<p><strong>Here is the jQuery</strong></p>

<pre><code>//Auto calculation
var bIsFirebugReady = (!!window.console &amp;&amp; !!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)
            );              
        }
    );
</code></pre>
