Jquery/javascript calculation issue in array of records

Question

I am doing some calculations in my php script. its done in jquery/javascript. I have a small issue with my following script. The actual scenario is its getting the Total INR value, In the Add (%) field i add the percentage. So the system calculates and add this percentage to the Total Value. Its perfect in the first row of record. But in the second row, its taking the value of the first row. Iam making a small mistake. My script is following. Pls help me on this.

<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
 <script type='text/javascript'>
 //<![CDATA[

 function getIndexedElement(item, index) {
if (item.length) {
    if (index < item.length) {
        return item[index];
    } else {
        return false;
    }
 } else {
    if (index === 0) {
        return item;
    }
}
return false;
 }

 function isNum(value) {
return 123;
 }

 function calcTotals() {
var grandTotal = 0;
var i = 0;

while (getIndexedElement(document.forms['cart'].elements['add_percentage[]'], i)) {
    add_percentageObj = getIndexedElement(document.forms['cart'].elements['add_percentage[]'], i);
    addon_valueObj = getIndexedElement(document.forms['cart'].elements['addon_value[]'], i);
    total_inr_valueObj = getIndexedElement(document.forms['cart'].elements['total_inr[]'], i);

    totalObj = getIndexedElement(document.forms['cart'].elements['add_value[]'], i);
    priceunitObj = getIndexedElement(document.forms['cart'].elements['price_unit[]'], i);


    qtyObj = getIndexedElement(document.forms['cart'].elements['qty[]'], i);


    if (isNaN(add_percentageObj.value)) {
        add_percentageObj = '';
    }
    if (isNaN(addon_valueObj.value)) {
        addon_valueObj = '';
    }

    if (add_percentageObj.value != 0) {
        totalObj.value = Math.round((total_inr_valueObj.value * 1) * add_percentageObj.value / 100) + total_inr_valueObj.value * 1;
        grandTotal = grandTotal + parseFloat(totalObj.value);

        //priceunitObj.value = total1Obj.value/qtyObj.value;

        //c.value=Math.round((b.value/100) *a.value ).toFixed(2);

    } else if (addon_valueObj.value) {
        totalObj.value = Math.round((addon_valueObj.value * 1) + total_inr_valueObj.value * 1);
        grandTotal = grandTotal + parseFloat(totalObj.value);
        //priceunitObj.value = total1Obj.value/qtyObj.value;

    } else {
        totalObj.value = Math.round((addon_valueObj.value * 1) + total_inr_valueObj.value * 1);
        grandTotal = grandTotal + parseFloat(totalObj.value);
        //priceunitObj.value = total1Obj.value/qtyObj.value;

    }

    i++;
}

document.getElementById('grand_total').value = grandTotal;
return;
 }
 </script>

 </head>

 <body>
<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save_complete.php?tender_id=14'>
    <input type='hidden' name='sum_input' id='sum_input' value=''>
    <div align="center">
        <table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1">
            <tr bgcolor="#E6E6FA">
                <td width=4%>Qty</td>
                <td width=5%>Unitprice</td>

                <td width=8%>Total INR</td>
                <td width=5%>Add (%)</td>
                <td width=7%>Add Value</td>
                <td width=6%>Total Value</td>
                <td width=8%>Total</td>
                <td width=8%>Price/Unit</td>
            </tr>
        </table>
    </div>
    <div align="center" class="base">
        <table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1">
            <tr>

                <td width='4%'>
                    <input size='1' class='qty' type='text' name='qty[]' id='qty[]' value='20' readonly/>
                </td>
                <td width='5%'>
                    <input size='5' type='text' name='unitprice[0]' value='678.000' readonly/>
                </td>
                <input size='4' type='hidden' id='total_inr[]' name='total_inr[]' value='883332.313' />
                <td width='8%'>
                    <input size='10' type='text' id='total_inr[]' name='total_inr[]' value='883332.300' />
                </td>
                <td width='5%'>
                    <input class='' size='4' type='text' id='add_percentage[]' name='add_percentage[]' value='0' onchange='calcTotals()'>
                </td>
                <td width='7%'>
                    <input class='txt' type='text' size='7' id='addon_value[]' name='addon_value[]' value='0' onchange='calcTotals()'>
                </td>
                <td width='6%'>
                    <input class='total' data-value='883332' size='6' type='text' id='add_value[]' name='add_value[]' value=''>
                </td>
                <input type="hidden" class="inrvalue" id="inrvalue" name="inrvalue" value="65.1425">
                <input type="hidden" class="deptip" id="dept-input" />
                <input type="hidden" class="priceip" id="price-input" />
                <td width="8%">
                    <input size="9" type="text" data-value="" name='total1[]' id='total1[]' value="16271.993" readonly class="total1" />
                </td>
                <td width='8%'>
                    <input class='price_unit' size='7' type='text' id='price_unit[]' name='price_unit[]' value='813.600' readonly>
                </td>
            </tr>
        </table>
    </div>
    <div align="center" class="base">
        <table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1">
            <tr>
                <td width='4%'>
                    <input size='1' class='qty' type='text' name='qty[]' id='qty[]' value='360' readonly/>
                </td>
                <td width='5%'>
                    <input size='5' type='text' name='unitprice[1]' value='569.000' readonly/>
                </td>

                <td width='8%'>
                    <input size='10' type='text' id='total_inr[]' name='total_inr[]' value='13343789.700' />
                </td>
                <td width='5%'>
                    <input class='' size='4' type='text' id='add_percentage[]' name='add_percentage[]' value='0' onchange='calcTotals()'>
                </td>
                <td width='7%'>
                    <input class='txt' type='text' size='7' id='addon_value[]' name='addon_value[]' value='0' onchange='calcTotals()'>
                </td>
                <td width='6%'>
                    <input class='total' data-value='883332' size='6' type='text' id='add_value[]' name='add_value[]' value=''>
                </td>
                <td width="8%">
                    <input size="9" type="text" data-value="" name='total1[]' id='total1[]' value="16000.803" readonly class="total1" />
                </td>
                <td width='8%'>
                    <input class='price_unit' size='7' type='text' id='price_unit[]' name='price_unit[]' value='44.447' readonly>
                </td>
            </tr>
        </table>
    </div>
    <table width='100%'>
        <tr>
            <td width='3%'>&nbsp;</td>
            <td width='4%'>&nbsp;</td>
            <td width='17%'>&nbsp;</td>
            <td width='5%'>&nbsp;</td>
            <td width='5%'>&nbsp;</td>
            <td width='6%'>&nbsp;</td>
            <td width='5%'>&nbsp;</td>
            <td width='7%'>&nbsp;</td>
            <td width='8%'>&nbsp;</td>
            <td width='5%'>&nbsp;</td>
            <td height=35><b>Grand Total:&nbsp;&nbsp;&nbsp;&nbsp;<input type='text' style='font-weight: bold' name='gTotal' id='grand_total' value='1766664.000' readonly /></b></td>
        </tr>
        <tr>
    </table>
    <br>
    </div>
    <table border='0' width='13%'>
        <td>
            <input type='submit' value='--Save Data--' />
        </td>

You can check by adding a percentage value in the first row. its working fine. You can see the Total Value of the second row, its taking the INR value of the first row. Where iam making mistake? — Sujith Nair, Oct 24 '15 at 08:15
If php is not part of the problem, I cannot see it anywhere in the sample code given, then remove the `php` tag. You might also consider rephrasing - I am getting lost. Be specific, like 'taking the value' what is 'the value' referring to? — YoYo, Oct 24 '15 at 08:20
i have edited the script. i did the formatting. You can check by adding a percentage value in the first row. its working fine. You can see the Total Value of the second row, its taking the Total INR value of the first row. Where iam making mistake? — Sujith Nair, Oct 24 '15 at 08:30

score 0 · Answer 1 · edited May 23 '17 at 10:27

Element ID's have to be unique. If you refer to an element by id, and there are multiple elements with the same ID, then you likely only going to get the first one back. Also, I suspect that elements["name"] does not give an array back, but a unique element.

Instead try using something like this instead:

cartForm = document.forms['cart'];
...
add_percentageObj = getIndexedElement(cartForm.getElementsByName('add_percentage[]'), i);

An element name does not have to be unique. I see that you are already using both id and name anyhow on your elements.

Also I would suggest writing a function like this (untested):

function getCartElement(name, index) {
  namedElements = document.forms['cart'].getElementsByName(name);
  if (index >= namedElements.length) return null;
  return namedElements[index];
  if (item.length) {
}

Anyway, the rest of your code would look like something like this:

while (getCartElement('add_percentage[]', i) != null) {
  add_percentageObj = getCartElement('add_percentage[]', i);
  addon_valueObj    = getCartElement('addon_value[]', i);
  ...

Note that I made sure that your function returns a consistent datatype, not one time boolean, another time an element instance ... this does mean however that you will require to check for null values.

Reference:

Also read this other stackoverflow article

Jquery/javascript calculation issue in array of records

1 Answers1