SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •