Home/ Questions/Q 8831807
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T08:23:34+00:00

Trying to make a simple form that calculates; the line total, qty total, freight

  • 0

Trying to make a simple form that calculates; the line total, qty total, freight * qty total, then the grand total, have found a bit of code to do the first part in jquery, but not 100% sure how to do the rest!

Below is what I have so far…

Thx
Matt.

<HTML>
    <pre class="prettyprint">
        This is an example of working out total pricing,  original code taken from 
        V3: http://stackoverflow.com/questions/9900369/jquery-calculate-sum-of-fields-dynamic

        -Need to work out total QTY, then multiple total freight by total qty (ie. qty of 5, so 5 x $10 = $50 worth of freight)
    </pre>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <SCRIPT>
        $(function(){
            function doCalc() {
                var total = 0;
                $('tr').each(function() {
                    $(this).find('span.amount').html($('input:eq(0)', this).val() * $('select', this).val());
                });
                $('.amount').each(function() {
                    total += parseInt($(this).text(),10);
                });
                $('div.total_amount').html(total);

            }
            $('button').click(doCalc);
        });
    </script>
    <table class="table table-striped table-condensed table-bordered">
        <thead>
            <tr>
                <th width="20%">Item</th>
                <th width="20%">Unit Price</th>
                <th width="20%">Quantity</th>
                <th width="20%">Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Item1</td>
                <td>$10<input type="hidden" value="10"></td>
                <td><select size="1" style="border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">
                    <option value="0" selected>0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select></td>
                <td>$<span class="amount"></span> </td>
            </tr>
            <tr>
                <td>Item2</td>
                <td>$20<input type="hidden" class="really don't care" name="testing" value="20"></td>
                <td><select size="1" class="input-small" name="var_1_1" style="border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">
                    <option value="0" selected>0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select></td>
                <td>$<span class="amount"></span> </td>
            </tr>
            <tr>
              <td colspan="3"><strong>Total  QTY</strong></td>
              <td></td>
              <td><strong><div class="total_qty"></div></strong></td>
          </tr>
          <tr>
              <td colspan="3"><strong>Total  Freight @$15 x QTY</strong></td>
              <td></td>
              <td><strong><div class="total_freight"></div></strong></td>
          </tr>
          <tr>
            <td colspan="3"><strong>Total  cost $</strong></td>
            <td></td>
            <td><strong><div class="total_amount"></div></strong></td>
        </tr>
    </tbody></table>
    <button>Go!</button>
</HTML>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Check it out here,
    http://jsfiddle.net/muthkum/hDdtx/2/

    I modified your JS code,

    $(function(){
    function doCalc() {
        var total = 0;
        var qty = 0;
        $('tr').each(function() {
            $(this).find('span.amount').html($('input:eq(0)', this).val() * $('select', this).val());
        var sel_val = parseInt($('select', this).val(), 10);
        if(!sel_val) sel_val = 0;
        qty = qty + sel_val;
        });
        $('.amount').each(function() {
            total += parseInt($(this).text(),10);
        });
        $('.total_qty').text(qty);    //Total QTY calculation
        $('.total_freight').text(15*qty);   //Total Freight @$15 x QTY calculation
        $('div.total_amount').html(total);  //Total Cost

    }
    $('button').click(doCalc);
});
    • 0