CODEWITHSUNDEEP
jqueryforms
Simon Trice
Simon Trice

Reputation: 3

Calculate dynamic fields using jquery

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.

Upvotes: 0

Views: 551

Answers (1)

Jamiec
Jamiec

Reputation: 136094

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/

Upvotes: 1

Related Questions