# Thread: table based calculation on repeating rows with input fields

1. ## table based calculation on repeating rows with input fields

I've hacked together a calculator, it features one row to begin with that accepts user inputs to specify height (from dropdown), width, depth, qty (text fields).

It then performs a calculation (width+depth) * multiplier +12
The multiplier is defined by an IF based on the selected height.

I want to add 10 or more rows which are identical, and then get a grand total for all the rows' totals added together.

Where I am stuck is how to change the drawerPrice function to handle extra rows.

I basically know nothing about js, this is a result of day 1.

Code JavaScript:
```<script type = "text/javascript">
//<![CDATA[

function orderTotal(){
var txtOutput3 = document.getElementById("txtOutput3");
var finalTotal = 0;
finalTotal = parseFloat(finalTotal) + parseFloat(drawerSub);

finalTotalVat = (finalTotal * 0.175) + finalTotal;
//round to two decimals
finalTotalVat = Math.round(finalTotalVat*100)/100;

txtOutput3.innerHTML = finalTotal + "<br/>+VAT: " + finalTotalVat;

}

function drawerPrice(){

var boxHeight = document.getElementById("boxHeight");
var boxWidth = document.getElementById("boxWidth");
var boxDepth = document.getElementById("boxDepth");
var boxQty = document.getElementById("boxQty");
var txtOutput = document.getElementById("txtOutput");
var txtOutput2 = document.getElementById("txtOutput2");

// get user inputted values for dimensions
var height = boxHeight.value;
var width = boxWidth.value;
var depth = boxDepth.value;
var qty = boxQty.value;

// calculate multiplier
var multiplier = 0;
if (height == 77) {
multiplier = 0.018;
}
else
if (height == 102) {
multiplier = 0.018;
}
else
if (height == 127) {
multiplier = 0.022;
}
else
if (height == 152) {
multiplier = 0.026;
}
else
if (height == 177) {
multiplier = 0.038;
}
else
if (height == 202) {
multiplier = 0.045;
}

// unit drawer cost
var drawerCost = (parseFloat(width) + parseFloat(depth)) * parseFloat(multiplier) + 12;
//round to two decimals
drawerCost = Math.round(drawerCost * 100) / 100;
// multiply for quantity
drawerSub = drawerCost * parseFloat(qty);

// Lastly convert to currency format (fixed 2 decimal places length) - gives results as STRING
drawerCost = drawerCost.toFixed(2);
drawerSub = drawerSub.toFixed(2);

// output values
txtOutput.innerHTML = drawerCost;
txtOutput2.innerHTML = drawerSub;

}

//]]>
</script>```

The HTML is:

HTML Code:
```<form action = "">
<fieldset style="background-color:#cccccc; width:475px; border:0; margin:0;">
<table width="100%" border="0">
<tr>
<td align="center"><b>Height</b></td>
<td align="center"><b>Width</b></td>
<td align="center"><b>Depth</b></td>
<td align="center"><b>Qty</b></td>
<td align="center"><b>Calc</b></td>
<td align="center"><b>Cost</b></td>
<td align="center"><b>Subtotal</b></td>
</tr>
<tr>
<td align="center">
<select id = "boxHeight">
<option value = "77">77mm</option>
<option value = "102">102mm</option>
<option value = "127">127mm</option>
<option value = "152">152mm</option>
<option value = "177">177mm</option>
<option value = "202">202mm</option>

</select>
</td>
<td align="center"><input type = "text" id = "boxWidth" size="5" /></td>
<td align="center"><input type = "text" id = "boxDepth" size="5" /></td>
<td align="center"><input type = "text" id = "boxQty" size="2" /></td>
<td align="center"><input type = "button" value = "Cost" onclick = "drawerPrice()"/></td>
<td align="right"><span id = "txtOutput"></span></td>
<td align="right"><span id = "txtOutput2"></span></td>
</tr>

<tr>
<td colspan="7" align="right"><hr/><input type = "button" value = "Total" onclick = "orderTotal()"/><br/>
<span id = "txtOutput3"></span></td>

</tr>

</table>

</fieldset>
</form>```

2. If there is no clever way to do it, I guess I will just create a function for each row that does the same thing so each cost button calls a different numbered row function eg drawerCost1, drawerCost2...