Question

i was wondering if my jquery is correct for add the td and get the total for the sub total and total.

my jquery is,

$(document).ready(function(){
    var sum = 0;
    var td = $('input[name=sumof]').val();
    jQuery.each(td,function(number){
            sum += parseInt($(this).val());
        $('#total_f').val(sum);
    });
})

and this is my html

<div class="quotation_computation" style="margin-top:50px;">
    <table cellpadding="5" cellspacing="0" width="100%">
        <tr>
            <th>#</th>
            <th>Definition</th>
            <th>Amount</th>
            <th>Total</th>
            <th>BTW</th>
        </tr>
        <?
        $get_details = mysql_query( "SELECT * FROM jon_com_quo_computation WHERE com_code = '".$_GET['ccom']."' " ) or die ( mysql_error());

            $found_record = mysql_num_rows( $get_details );
            if ( $found_record != 0 ) {
            while( $set_det = mysql_fetch_array( $get_details ) ) {
                $total = $set_det['quo_quantity'] * $set_det['quo_amt'];
            ?>
        <tr>
            <td class="add_text">
                    <?=$set_det['quo_quantity'];?> x
            </td>
            <td class="add_text" width="250"><?=$set_det['quo_definition'];?></td>
            <td class="sum_text">
                    <?=$set_det['quo_amt'];?>
                <input type="hidden" name="sumof" value="<?=$set_det['quo_amt'];?>" />
            </td>
            <td class="add_text" id="total"><?=$total;?></td>
            <td class="add_text"><?=$set_det['quo_btw'];?></td>
        </tr>
        <?
                }
            } else {
            ?>                
        <tr>
            <td class="add_text">#</td>
            <td class="add_text">Definition</td>
            <td class="add_text">Amount</td>
            <td class="add_text" id="total">Total</td>
            <td class="add_text">BTW</td>
        </tr>
        <?
            }
            ?>
    </table>
</div>

<div class="sub_total_computation" style="width:200px; position:relative; left:325px;">
<?
    $get_total_computation = SET_SQL( "SELECT quo_btw FROM jon_com_quo_computation WHERE com_code = '".$_GET['ccom']."' " );


    ?>
    <table cellpadding="5" cellspacing="0" width="100%">
        <tr>
            <td><strong>Sub Total</strong></td>
            <td>
                <span id="total_f"></span>
                <input type="hidden" name="total_f" value="" />
            </td>
        </tr>
        <tr>
            <td><?=$get_total_computation['quo_btw'];?></td>
            <td><?=$btw;?></td>
        </tr>
        <tr>
            <td><strong>Total</strong></td>
            <td><?=$btw;?></td>
        </tr>
    </table>
</div>

if you saw the hidden name=sumof im going to put there the answer also in the td class=sum_text but the answer did not appear.
Do we need to use on .keyup function so that the jquery will appear?
Or i just need to use the PHP so that it will work?

thank you sir.

Answer 1

Try this:

$(document).ready(function(){
   var sum = 0;
   $('input[name=sumof]').each(function(){
        sum += parseInt($(this).val());
   });
   $('#total_f').val(sum);
 });

Your variable td would only get one value out of the input elements, and NOT be sufficient to use as an object (the input element) to loop with your each() function. Also you only need to have the function output the sum once, so I took it out of the each loop.

To further make the function efficient You could use just the contents of the td element instead and completely remove the hidden input element:

$(document).ready(function(){
   var sum = 0;
   $('td.sum_text').each(function(){
        sum += parseInt($(this).text());
   });
   $('#total_f').val(sum);
 });