Calculate dynamic fields using jquery

Question

I'm 'trying' to get a invoice template built and want to have the line totals, sub total, vat and total inputs fill automatically. Everything I have tried so far does not seem to produce any results so I thought I would turn to my greatest teaching resource to try and solve the problem.

Here is the part of the page code I am attempting to fill

<table class="appendo" width="100%" border="0" name="item" id="item">
    <tr>
      <td><input type="text" name="description[]" class="input3" tabindex="11"/></td>
      <td width="100"><input type="text" name="quantity[]" class="qtys" tabindex="12"/></td>
      <td width="100"><input type="text" name="cost[]" class="costs" tabindex="13"/></td>
      <td width="100"><input type="text" name="tot[]" class="tots" tabindex="14"/></td>
    </tr>
    </table>
    <input type="button" name="update" value="Update Totals" />
    <table width="200" border="0" name="totals" id="totals">
    <tr>
     <td width="100">Sub Total</td>
      <td width="100"><input name="sub" type="text" class="sub" tabindex="15" readonly="readonly"/></td>
      </tr>
      <tr>      
      <td width="100">VAT</td>
       <td width="100"><input name="vat" type="text" class="vat" tabindex="16" readonly="readonly"/></td> 
       </tr>
       <tr>   
      <td width="100">TOTAL</td>
      <td width="100"><input name="total" type="text" class="gtotal" tabindex="17" readonly="readonly"/></td>        
    </tr>
    </table>

And this is the script I have so far cobbled together

 $sumDisplay = $('input#total');

    var $sub = 0;
    var $vat = 0;
    var $total = 0;

    function compute() 
    {
    $('#item tr').each(function() {
                    //get line totals
    $sum = 0;   
    $sum = (
            parseFloat($(this).find('.qtys').val())*
            parseFloat($(this).find('.costs').val())
        );
    $(this).find('.tots').val=$sum;
                   //get sub total    
    var value = Number($(this).find('.tots').val())
             $sub += value; );
                   //Get VAT
    $vat = $sub*1.2;
    }
                  //Write Values
    $(this).find('.sub').val=$sub;
    $(this).find('.vat').val=$vat;
    });

I have it on fiddle if you want to see it not working.

I hope you guys can help.

You should not really prefix all variables with "$". "$" prefix should preferably be only used for jQuery objects. — mishik
– mishik, Commented Jun 7, 2013 at 15:05
First things you should check - nothing has an id of total and nothing calls compute — Jamiec
– Jamiec, Commented Jun 7, 2013 at 15:07

Jamiec · Accepted Answer · 2013-06-07 15:17:12Z

1

As I stated in a quick comment the main problem with the code you've posted is that nothing ever calls compute, but lets asume that's an oversight and the button you clearly have in your markup is supposed to be calling that method.

The next issue you have is with all the lines that look like:

$(this).find('.tots').val=$sum;

val() is a method, and therefore that line should read

$(this).find('.tots').val($sum);

The next problem is in the final two lines

$(this).find('.sub').val=$sub;
$(this).find('.vat').val=$vat;

Those two fields are not within the scope of the #item tr for which you are looping. So you'll never .find them. They also suffer from the same problem as described above. Instead those lines could be

$('.sub').val($sub);
$('.vat').val($vat);

There was some other cleaning up of your code, braces in the wrong place etc which was needed but I eventually got your code to work. Here is it working: http://jsfiddle.net/Fg5Ly/5/

answered Jun 7, 2013 at 15:17

Jamiec

136k15 gold badges142 silver badges202 bronze badges

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

3 Comments

Simon Trice Over a year ago

Thanks for that Jamie, This definitely points me in the right direction.

Simon Trice Over a year ago

Also it doesn't work at all under IE10 in fiddle. (should have checked that before bothering you guys.)

Jamiec Over a year ago

@SimonTrice - works fine in IE10 if you drop the jQuery version back to 1.9.1

Collectives™ on Stack Overflow

Calculate dynamic fields using jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related