...

View Full Version : Adding rows on a form to output a total and grand total



Robert Jacobs
11-08-2006, 06:38 AM
Hi,

I copied a "simple add" script that was posted years ago by wyattweb but want to modify it so that it can support multiple rows and also give me a grand total. I donít know javascript and donít really know where to start. Attached is the code that I have but it breaks when I add the 2nd row.

Thanks for any help.

<html>
<head>
<title>Simple add</title>

<script language="javascript">
function totFields()
{
var totArr = totForm.getElementsByTagName("input");
var ii = totArr.length;
var i = 0;
var totVal = 0;

for (i=0;i<ii;i++)
{
if (totArr(i).type == "text" &&
totArr(i).value > "" &&
totArr(i).id != "txtTotal")
{
totVal += parseInt(totArr(i).value);
}
}
totForm.txtTotal.value = totVal;
}

</script>
</head>

<body>

<form method="POST" action="" id="totForm">
<table colspan="1">
<tr bgcolor="#F3F3F3">
<td class="center">Small</td>
<td class="center">Medium</td>
<td class="center">Large</td>
<td class="center">X-Large</td>
<td class="center">Total</td>
</tr>
<tr bgcolor="#F3F3F3">
<td class="center"><input type="text" size="3" name="T1" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="T2" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="T3" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="T4" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="txtTotal" size="20" ID="txtTotal"></td>
</tr>
<tr bgcolor="#F3F3F3">
<td class="center"><input type="text" size="3" name="T1" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="T2" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="T3" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="T4" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="txtTotal" size="20" ID="txtTotal"></td>
</tr>
<tr bgcolor="#F3F3F3">
<td colspan="4">Grand Total:</td>
<td class="center"><input type="text" size="3" name="txtTotal" size="20" ID="txtTotal"></td>
</tr>

</table>
</form>

</body>
</html>

Mr J
11-08-2006, 09:56 AM
Give this a try.


<html>
<head>
<title>Simple add</title>

<script type="text/javascript">

function totFields(){

puts=document.getElementById("r1").getElementsByTagName("input").length

rowCount=0

while(document.getElementById("r"+rowCount)){
subTotal=0
currentRow=document.getElementById("r"+rowCount)
rowInputs=currentRow.getElementsByTagName("input")

for(var i=0;i<rowInputs.length;i++){

if(rowInputs[i].type=="text"&&rowInputs[i].name.indexOf("subtotal")==-1){
subTotal+=rowInputs[i].value*1
}

}

document.getElementById("subtotal"+rowCount).value=subTotal
rowCount++
}

total=0
for(var j=0;j<rowCount;j++){
total+=document.getElementById("subtotal"+j).value*1
}

document.getElementById("gtotal").value=total

}

</script>
</head>

<body>

<form method="POST" action="" id="totForm">
<table colspan="1">
<tr bgcolor="#F3F3F3">
<td class="center">Small</td>
<td class="center">Medium</td>
<td class="center">Large</td>
<td class="center">X-Large</td>
<td class="center">Total</td>
</tr>
<tr bgcolor="#F3F3F3" id="r0">
<td class="center"><input type="text" size="3" name="t1" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="t2" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="t3" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="t4" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="subtotal0" size="20" id="subtotal0" readonly></td>
</tr>
<tr bgcolor="#F3F3F3" id="r1">
<td class="center"><input type="text" size="3" name="t1" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="t2" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="t3" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="t4" onchange="totFields();"></td>
<td class="center"><input type="text" size="3" name="subtotal1" size="20" id="subtotal1" readonly></td>
</tr>
<tr bgcolor="#F3F3F3">
<td colspan="4">Grand Total:</td>
<td class="center"><input type="text" size="3" name="gtotal" size="20" id="gtotal" readonly></td>
</tr>

</table>
</form>

</body>
</html>

Note:
Be careful when using capitals as Javascript is case sensitive

Robert Jacobs
11-11-2006, 05:28 AM
Thanks Mr. J!! This is exactly what I needed it to do. It will probably take me a week to figure out how you did it. Until then, it's all magic to me. :)

Mr J
11-11-2006, 08:55 AM
Robert

Glad to be of help, here's a brief explanation of what happens.

If you look at the HTML code you will notice that I gave each row containing the inputs an ID, this effectively puts them in groups.

The script then loops through each group adding them together.

The one thing I forgot to include was to check that a value being added was a number.

This can be done by adding &&!isNaN(rowInputs[i].value)

to this line

if(rowInputs[i].type=="text"&&rowInputs[i].name.indexOf("subtotal")==-1){

like this

if(rowInputs[i].type=="text"&&rowInputs[i].name.indexOf("subtotal")==-1&&!isNaN(rowInputs[i].value)){

skeep5
01-18-2011, 10:38 PM
thanks for this code, its almost exactly what I need, with the exception that I need to Multiply the row quantities to get the row subtotal, then add the subtotals. How do I change it so the row quantities are multiplied to get the subtotal?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum