Jquery - Auto calculate input field

Question

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>

Jasper · Accepted Answer · 2012-11-28 10:24:30Z

6

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

edited Nov 28, 2012 at 10:24

Jasper

2,1524 gold badges31 silver badges51 bronze badges

answered Nov 28, 2012 at 10:04

bercium

762 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery - Auto calculate input field

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related