Home/ Questions/Q 8702935
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T02:46:17+00:00

I have 3 fields Quantity, Rate, Total Amount. If any one keyup quantity or

  • 0

I have 3 fields Quantity, Rate, Total Amount. If any one keyup quantity or rate fields then amount show on Total Amount field. I have also an add button. If anyone click on add button then new row and delete link create dynamically. My problem is If I keyup quantity or rate fields then calculateSum() function work properly. suppose I create 2 row it’s total amount 100+(100+100)=300. If i delete first one nothing change. If i delete last one then result show 200. but correct result is 100.Please can someone point out what I may be doing wrong here? Many thanks. 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() {
$(document).on("keyup",".qty, .rate",function(){
        calculateSum();
    });

$(document).on("click",".del",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 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);
}
</script>
<script type="text/javascript" language='javascript'>
/*
This script is identical to the above JavaScript function.
*/
var ct = 1;

function new_link()
{
    ct++;
    var div1 = document.createElement('div');
    div1.id = ct;

    // link to delete extended form elements
    var delLink = '<div  style="text-align:right;margin-top:-20px"><a class="del" href="javascript:delIt('+ ct +')">Delete</a></div>';

    div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink;

    document.getElementById('newlink').appendChild(div1);

}
// function to delete the newly added set of elements
function delIt(eleId)
{
    d = document;

    var ele = d.getElementById(eleId);

    var parentEle = d.getElementById('newlink');

    parentEle.removeChild(ele);

}
</script>
        <style type="text/css">
table
{
    border: 1px solid black;
    width: 600px;
}


td
{
    border: 1px solid black;
    padding:5px 5px 5px 5px;
}

        </style>
    </head>
    <body>
        <div id="newlink">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>Quantity</td>
                <td>Rate</td>
                <td>Total Amount</td>
            </tr>

             <tr>
                 <td><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>

                 </table>
    </div>
        <div id="sub_total">0</div>
        <input type="button" value="Add" onclick="new_link()"/>

                <div id="newlinktpl" style="display:none">
        <table cellpadding="0" cellspacing="0">
          <tr>
                 <td><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>
                 </table>
    </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this:

    In .ready():

    $(document).on("click",".del", function() {
    // Call delIt before calculateSum() and get id from data attribute.
    delIt($(this).data("id")) 

    calculateSum();
});

    in new_link():

    // link to delete extended form elements
var delLink = '<div style="text-align:right;margin-top:-20px"><a class="del" href="#" data-id=' + ct + '>Delete</a></div>';
// Set href = # and set ct to data-id instead.
    • 0