Jquery - 自动计算输入字段

时间:2012-11-28 09:23:32

标签: jquery html

我正试图让这个代码工作,我真的很感谢你的帮助。基本上它是计算三个输入字段的总和,然后乘以另外两个字段。最终结果应显示在输入字段pcamount中。

以下是jsFiddle中的例子:http://jsfiddle.net/D98PW/

Bellow是jquery脚本和html

提前感谢您的帮助!

 $(document).ready(function() {
   $('input[name=deposit], input[name=minpremium], input[name=adjpremium],input[name=procombaserate], input[name=profcomper], input[name=pcamount]').change(function(e)  {
        var total_mnozi = 0;
        var total=0;
        var $row = $(this).parent();
        var dep = $row.find('input[name=deposit]').val();
        var minpre = $row.find('input[name=minpremium]').val();
        var adjpre = $row.find('input[name=adjpremium]').val();
        var procombase = $row.find('input[name=procombaserate]').val();
        var profcomper = $row.find('input[name=profcomper]').val();
       // var pcamount= $row.find('input[name=pcamount]').val();
       // total_mnozi= procombase * profcomper;
         $('dep, minpre, adjpre').each(function() {
       total += parseFloat($(this));
          total_mnozi = total * procombase * profcomper;
          $row.find('input[name=pcamount]').val( total_mnozi);

  });   
    });
   });

和html

<table >
    <tr>  
        <td><label>MIN Premium</label></td>
         <td class="toadd"><input type="text" class="input1" name="minpremium" id="minpremium" value=""></td>   
       </tr>
        <tr>
          <td><label>Deposit</label></td>                              
         <td ><input type="text" name="deposit" id="deposit" class="input1" size="20" value=""></td>
          <td></td><td></td>  
       </tr>
       <tr>
       <td><label>Adjustment Premium</label></td>                              
       <td ><input type="text" name="adjpremium" id="adjpremium" class="input1" size="20" value=""></td>
        <td><label>Return Premium</label></td>
         <td><input type="text" class="input1" name="returnpremium" id="returnpremium"></td>
         </tr>
        <tr>   
        <td><label>Tax Allocation</label></td>
        <td><input type="text" class="input1" name="taxalloc" id="taxalloc"></td>
        <td><label>Premium Base Rate</label></td>
        <td><input type="text" class="input1" name="pramiumbase" id="pramiumbase"></td>
       </tr>
       <tr>
        <td><label>Adjustable Rate</label></td>
        <td><input type="text" class="input1" name="adjrate" id="adjrate" class="input1" size="20" value=""></td>
        <td><label>PC Base Rate</label></td>
         <td><input type="text" class="input1" name="procombaserate" id="procombaserate" class="input1" size="20" value=""></td> </tr>
        <tr>
           <td><label>Profit Commission %</label></td>
             <td><input type="text" class="input1" name="profcomper" id="profcomper" value=""></td>
              <td><label>PC Amount</label></td>
         <td><input type="text" class="input1" name="pcamount" id="pcamount" class="input1" size="20" >
                    </td>                   
       </table>   

1 个答案:

答案 0 :(得分:4)

由于您在所有输入字段上使用ID,因此可以使用该字段而不是NAME属性。它更短,更透明。

您可以将change调用绑定到所有输入元素,或者如果您希望限制它们,可以使用$('input#ID1, input#ID2,...'),其中ID1,ID2 ...是您希望将其设置为的元素的ID。

$(document).ready(function() {
   $('input').change(function(e)  {
        var total_mnozi = 0;
        var dep = parseFloat($('#deposit').val());
        var minpre = parseFloat($('#minpremium').val());
        var adjpre = parseFloat($('#adjpremium').val());
        var procombase = parseFloat($('#procombaserate').val());
        var profcomper = parseFloat($('#profcomper').val());

        total_mnozi = (dep+minpre+adjpre) * procombase * profcomper;
        $('#pcamount').val( total_mnozi);
    });
   });