jquery - 自动计算输入字段 [英] Jquery - Auto calculate input field

问题描述

我试图让这段代码工作，我非常感谢你的帮助。基本上它是计算三个输入字段的总和，然后与另外两个字段相乘。最终结果应该显示在输入字段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 = minpremium]'）。val（）; 
 var（）; 
 var minpre = $ row.find val（）; $ b $（）; $ procbase = $ row.find（'input [name = procombaserate]'）。val（）; 
 var profcomper = $ row.find（'input [name = profcom （）;）; 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 =textclass =input1name =minpremiumid =minpremiumvalue =>< / td> 
< / tr> 
< tr> 
< td><标签>存款< / label>< / td> 
< td>< input type =textname =depositid =depositclass =input1size =20value =>< / td> 
< td>< / td>< td>< / td> 
< / tr> 
< tr> 
< td>< label>调整Premium< / label>< / td> 
< td>< input type =textname =adjpremiumid =adjpremiumclass =input1size =20value =>< / td> 
< td>< label>返回Premium< / label>< / td> 
< td>< input type =textclass =input1name =returnpremiumid =returnpremium>< / td> 
< / tr> 
< tr> 
< td><标签>税务分配< /标签>< / td> 
< td>< input type =textclass =input1name =taxallocid =taxalloc>< / td> 
< td><标签>优质基本费率< / label>< / td> 
< td>< input type =textclass =input1name =pramiumbaseid =pramiumbase>< / td> 
< / tr> 
< tr> 
< td><标签>可调整费率< / label>< / td> 
< td>< input type =textclass =input1name =adjrateid =adjrateclass =input1size =20value => TD> 
< td>< label> PC Base Rate< / label>< / td> 
< td>< input type =textclass =input1name =procombaserateid =procombaserateclass =input1size =20value =>< TD> < / TR> 
< tr> 
< td>< label>利润佣金％< / label>< / td> 
< td>< input type =textclass =input1name =profcomperid =profcompervalue =>< / td> 
< td>< label>个人电脑金额< / label>< / td> 
< td>< input type =textclass =input1name =pcamountid =pcamountclass =input1size =20> 
< / td> 
< / table> 
  

解决方案

由于您在所有输入字段上使用了ID可以使用它来代替NAME属性。它可以更短，更透明。

您可以将更改调用绑定到您的所有输入元素，或者如果您愿意为了限制它们，您可以使用 $（'input＃ID1，input＃ID2，...'）其中ID1，ID2 ...是您希望设置的元素的ID它到。

  $（document）.ready（function（）{
 $（'input'）。change （函数（e）{
 var total_mnozi = 0; 
 var dep = parseFloat（$（'＃deposit'）。val（））; 
 var minpre = parseFloat（$（' （$（'＃adjpremium'）。val（））; 
 var procombase = parseFloat（$（'＃procombaserate'）。val（）; val（））; 
 var adjpre = parseFloat ））; 
 var profcomper = parseFloat（$（'＃profcomper'）。val（））; 
 
 total_mnozi =（dep + minpre + adjpre）* procombase * profcomper; 
 $（'＃pcamount'）。val（total_mnozi）; 
}）; 
}）; 
  

I am trying to make this code bellow to work, I would really appreciate your help. Basicly it is Calculation of sum of three input fields and then multiplication with two other fields. The final result should be shown in a input field pcamount.

Here is the exemple in jsFiddle: http://jsfiddle.net/D98PW/

Bellow is the jquery script and the html

Thanks in advance for your help!

 $(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);

  });   
    });
   });

And the 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>   

解决方案

Since you are using IDs on all your input fields you can use that instead of NAME attribute. It's a bit shorter and more transparent.

You can bind change call to all your input elements or if you wish to limit them you can use $('input#ID1, input#ID2,...') where ID1,ID2... is ID of element you wish to set it to.

$(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);
    });
   });

这篇关于jquery - 自动计算输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！