Sum of array elements

Hi again!!
This is my code to add and delete dynamic rows and auto calculate the amount field by multiplying qty and rate.

<form name="staff_reg" action="<?php echo $_SERVER['PHP_SELF']."?".$_SERVER['QUERY_STRING']; ?>" method="post" enctype="multipart/form-data">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<table border="0" cellpadding="1" cellspacing="0" class="normal-text" align="left">
<tr align="center">
<td width="10" class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td width="92" class="forhead" style="white-space:nowrap;">Qty</td>
<td width="94" class="forhead" style="white-space:nowrap;">Rate</td>
<td width="94" class="forhead" style="white-space:nowrap;">Amount</td>
</tr>
</table>

<tr align="left">
<td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" >&nbsp;
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" ></td>
<table border="0" id="dataTable" cellpadding="1" cellspacing="0" class="normal-text">
<tr>
<td width="10" class="forhead" style="white-space:nowrap;"><input type="checkbox" name="chk[]"/></td>
<td width="92" class="forhead" style="white-space:nowrap;">

<input type="text"  name="qty[]"  style="width:80px;" onblur="">

</td>
<td width="94" class="forhead" style="white-space:nowrap;">

<input type="text"  name="rate[]" style="width:80px;" value=""></td>

<td width="94" class="forhead" style="white-space:nowrap;">

<input type="text"  onblur="getValues('qty[]','rate[]','amt[]')" name="amt[]" style="width:80px;"></td>

</tr>
</table>
<table border="0">
<tr>
<td>Total:</td>
<td><input type="text"  name="total[]" style="width:80px;" value=""></td>
</tr>

<tr>
<td colspan="2">
<input name="Submit" type="submit" value="Save" style="text-decoration:none" />
<input type="reset" value="Cancel" onclick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'">
</td>
</tr>
</form>
<script type="text/javascript">

    function getValues(objName,objName2,objName3)
    {
		var var3 = "";
        var arr = new Array();
        arr = document.getElementsByName(objName);
		arr2 = document.getElementsByName(objName2);
		arr3 = document.getElementsByName(objName3);
        for(var i = 0; i < arr.length; i++)
        {
			for(var i = 0; i < arr2.length; i++)
			{
			for(var i = 0; i < arr3.length; i++)
			{
			
				var obj1 = document.getElementsByName(objName2).item(i);
				var var2 = obj1.value;

				var obj = document.getElementsByName(objName).item(i);
				var var1 = obj.value;

				var obj3 = document.getElementsByName(objName3).item(i);
				var var3 = obj3.value;
				var var4 = var1 * var2;
				document.getElementsByName(objName3).item(i).value=var4;

			}		
			}
        }	
		
    }

  function addRow(tableID) {
     var table = document.getElementById(tableID);
     var rowCount = table.rows.length;
     var row = table.insertRow(rowCount);
     var colCount = table.rows[0].cells.length;
	       for(var i=0; i<colCount; i++) {
               var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }
		
function deleteRow(tableID)
{
    		try
				 {
        		var table = document.getElementById(tableID);
        		var rowCount = table.rows.length;

        			for(var i=0; i<rowCount; i++)
						{
            			var row = table.rows[i];
            			var chkbox = row.cells[0].childNodes[0];

            			if (null != chkbox && true == chkbox.checked)
							{
                			if (rowCount <= 1)
								{
                    			alert("Cannot delete all the rows.");
                    			break;
                				}

                			table.deleteRow(i);
                			rowCount--;
                			i--;
            				}

        				}
    				} catch(e)
						{
        				alert(e);
    					}
}

</script>

I would like to know that how can I show the value of all the elements in array “amount” in total field??

That’s achieved by totalling up all the values in the array, and then updating the total field.

Which parts of that do you require help with?

So far I found this code on sitepoint forum:

<script type=“text/javascript”>
function GrandTotal(elem){
var sum=0;
var cost = document.getElementsByName(‘amt’);
for(var i=0;i<cost.length;i++)
{
sum += parseFloat(cost[i].value);
}
document.getElementByName(‘total’).value = sum;
}

</script> [QUOTE]

And if I call it in this way:

[QUOTE]<input type=“text” name=“total” style=“width:80px;” onblur=“return GrandTotal(this)”>

Its not working for some unknown reasons :frowning:

I have a question, creating objects with name “amt” does create a collection with objects named “amt[0]”, “amt[1]”, etc… or simply creates a collection of objects with name “amt” without indexes?

Asumming the previous method works, i see that you in this line are pointing to the object “document.getElementByName(‘total’).value = sum;” but you named “total”.

May be there is something to fix, by the way, which error gives you? that will explains many things.

See you :coo: