开发者

Calculate dynamic hidden field in jQuery

开发者 https://www.devze.com 2023-02-27 00:42 出处:网络
Goal: I need to auto-calculate a \"subtotal\" field based off clicking a yes/no radio button. There are two issues I am having

Goal: I need to auto-calculate a "subtotal" field based off clicking a yes/no radio button.

There are two issues I am having

  1. Being able to initiate the "recalc" function based off clicking the yes/no radio button
  2. 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&quot; 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")
0

精彩评论

暂无评论...
验证码 换一张
取 消