Home/ Questions/Q 8633257
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T09:27:55+00:00

I create an Invoice. Where I put 3 fields: Quantity, Rate and Total Amount.

  • 0

I create an Invoice. Where I put 3 fields: Quantity, Rate and Total Amount. Total amount calculate following this format (Quantity*Rate). All total Amount Sum Show on Sub_total div. Here is my code:

    <html>
    <head>
        <title>Invoice</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){

        $(".qty").each(function() {

            $(this).keyup(function(){
                calculateSum();
            });
        });

      $(".rate").each(function() {

            $(this).keyup(function(){
                calculateSum();
            });
        });


    });

    function calculateSum() {

    var qty = 1;
        $(".qty").each(function() {

            if(!isNaN(this.value) && this.value.length!=0) {
                qty = parseFloat(this.value);
            }

        });

                var rate = 0;
        $(".rate").each(function() {
           if(!isNaN(this.value) && this.value.length!=0) {
                rate = parseFloat(this.value);
            }

        });

        $('input[name=total_amount]').val(qty.toFixed(2)*rate.toFixed(2));
    }
</script>
        <style type="text/css">
table
{
    border: 1px solid black;
    border-bottom: none;
    width: 600px;
}


td
{
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    padding:5px 5px 5px 5px;
}
#first
{
    border-left: none;
    border-bottom: 1px solid black;
}
        </style>
    </head>
    <body>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td id="first">Quantity</td>
                <td>Rate</td>
                <td>Total Amount</td>
            </tr>
            <?php
            $num=4;
            for ($i=0; $i<$num; $i++)
            {
                echo "
             <tr>
                 <td id='first'><input class='qty' type='text' name='qty[]'/></td>
                <td><input class='rate' type='text' name='rate[]'/></td>
               <td><input class='total_amount' type='text' name='total_amount[]'/></td>
            </tr>";
            }
            ?>
                        <tr>
                            <td id="first" colspan="2" align="right">Sub Total:</td>
            <td><span id="sub_total">0</span></td>
            </tr>
                 </table>

    </body>
</html>

I want to show each Total amount following this way

total_amount[1]=(qty[1]*rate[1])
total_amount[2]=(qty[1]*rate[1])
total_amount[3]=(qty[1]*rate[1])
total_amount[4]=(qty[1]*rate[1])

I am trying so hard but my codes don’t work properly. So pls pls pls some one help me to solve this problem.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $(document).ready(function(){
    $(".qty, .rate").keyup(function(){
        calculateSum();            
    });
});

function calculateSum() {
    var qty = [];
    $(".qty").each(function() {
            var num = parseFloat(this.value) || 1;
            qty.push(num);
    });

    var rate = [];
    $(".rate").each(function() {
            var num = parseFloat(this.value) || 0;
            rate.push(num);
    });
    var sub_total = 0;
    $('input[name=total_amount]').each(function(i){
        var amount = qty[i].toFixed(2)*rate[i].toFixed(2);
        total += amount;
        $(this).val(amount);
    }
    $("#sub_total").text(total);
}
    • 0