Need help with javascript calculator

Brybo · #1 11-07-2009, 02:44 AM

Hey everyone, I'm new to javascript coding and a friend of mine helped me a little bit but now we are stuck. I am wanting a calculator where you can type in multiple values, certain ones get calculated and finally when you hit the calculate button, it spits out square footage, square inches, the cost of total material, etc.

Here is my code so you can see what I have so far:

Code:

<head>
<script language="JavaScript">

function Round2Dollars(amount) {
	var dollars = "$"+Math.floor(amount)+".";
	var cents = 100*(amount-Math.floor(amount))+0.5;
	result = dollars + Math.floor(cents/10) + Math.floor(cents%10);
	return result;
}

function Round2(amount) {
	var dollars = Math.floor(amount)+".";
	var cents = 100*(amount-Math.floor(amount))+0.5;
	result = dollars + Math.floor(cents/10) + Math.floor(cents%10);
	return result;
}

function calcul8() {
	var TotalAreaAccum = ((document.forms[0].Area1WidFt.value * 1)*(document.forms[0].Area1WidIn.value * 1)/144);
	TotalAreaAccum = TotalAreaAccum + ((document.forms[0].Area2LenFt.value * 1)*(document.forms[0].Area2WidIn.value * 2)/144);
	TotalAreaAccum = TotalAreaAccum + ((document.forms[0].Area1WidIn.value * 1)*(document.forms[0].Area2LenIn.value * 1)/144);
	
	document.forms[0].TotalSqFt.value = TotalAreaAccum + " ft ²";
	document.forms[0].TotalSqIn.value = TotalAreaAccum * 144 + " in ²";
	document.forms[0].WasteSqFt.value = Round2(TotalAreaAccum * .10);
	document.forms[0].TotalMatlReq.value = Round2(TotalAreaAccum * 1.05);
	document.forms[0].TotalCost.value = Round2Dollars(document.forms[0].TotalMatlReq.value * document.forms[0].CostPSF.value);
	
}

function resetform() {
	// Reset field on form to default values
	document.forms[0].Area1LenFt.value = "0";
	document.forms[0].Area1LenIn.value = "0";
	document.forms[0].Area1WidFt.value = "0";
	document.forms[0].Area1WidIn.value = "0";
	document.forms[0].Area2LenFt.value = "0";
	document.forms[0].Area2LenIn.value = "0";
	document.forms[0].Area2WidFt.value = "0";
	document.forms[0].Area2WidIn.value = "0";
	document.forms[0].Area3LenFt.value = "0";
	document.forms[0].Area3LenIn.value = "0";
	document.forms[0].Area3WidFt.value = "0";
	document.forms[0].Area3WidIn.value = "0";
	document.forms[0].CostPSF.value = "$0.00";
	document.forms[0].TotalSqFt.value = "0 ft ²";
	document.forms[0].TotalSqIn.value = "0 in ²";
	document.forms[0].WasteSqFt.value = "0";
	document.forms[0].TotalMatlReq.value = "0";
	document.forms[0].TotalCost.value = "$0.00";
}
// End -->
//-->
</script>
</head>

And the HTML part with text fields is:

Code:

<body>
<form>
<table align="center">
<tr valign="top">
<td align="center" valign="top">
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Fig 1 A<br><br><input type="text" size="8" value="0" name="Area1LenFt"/></span><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Fig 1 B <input type="text" size="8" value="0" name="Area1LenIn"/></span><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Fig 1 C <input type="text" size="8" value="0" name="Area1WidFt"/></span><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Fig 1 D <input type="text" size="8" value="0" name="Area1WidIn"/></span>
</td>
<td align="center" valign="top">
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Fig 2 A <input type="text" size="4" value="0" name="Area2LenFt"/></span><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Fig 2 B <input type="text" size="4" value="0" name="Area2LenIn"/></span><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Fig 2 C <input type="text" size="4" value="0" name="Area2WidFt"/></span><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Fig 2 D <input type="text" size="4" value="0" name="Area2WidIn"/></span>
</td>
<td align="center" valign="top">
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Fig 3 A <input type="text" size="4" value="0" name="Area3LenFt"/></span><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Fig 3 B <input type="text" size="4" value="0" name="Area3LenIn"/></span><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Fig 3 C <input type="text" size="4" value="0" name="Area3WidFt"/></span><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Fig 3 D <input type="text" size="4" value="0" name="Area3WidIn"/></span>
</td>
<td align="center" valign="top">
<input type="hidden" size="10" value="1.79" name="CostPSF"/><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Calculate Cost + Square Feet/Inches<br><input type="button" name="button" onclick="calcul8()" value="CALCULATE"/>
<input type="reset" name="reset" onclick="resetform()" value="CLEAR"/></span>
<br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Square Feet: <input type="text" size="5" value="0 ft ²" name="TotalSqFt"/></span><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Square Inches: <input type="text" size="5" value="0 in ²" name="TotalSqIn"/></span><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Waste/Discarded: <input type="text" size="4" value="0 ft ²" name="WasteSqFt"/></span><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Total Material: <input type="text" size="5" value="0" name="TotalMatlReq"/></span><br><br>
<span style="background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px;">Grand Total: <input type="text" size="6" value="$0.00" name="TotalCost"/></span>
</td>
</tr>
</table>
</form>

</body>

So as you can see, I want there to be Fig 1, Fig 2 and Fig 3. On Fig 1, only field C and D are able to be calculated (C * D). On Fig 2, fields A and D are calculated (A * D, then the A*D total get multiplied by 2). On Fig 3, fields A and B are calculated (Fig 1D * Fig 2B).

I am wanting square feet, square inches, the wasted material (set at 10%), total material, and finally the total cost. I know I am close, but I can't seem to figure it out. It seems the last time I tried it, if you try entering only fields Fig1C and Fig1D and Fig2A and Fig2D, (using a value of 12 in each box) the square footage should say 3 square feet and the inches should say 432. But instead, I get a total of 4 square feet and 576 square inches.

I cannot get any of Fig 3 to work. I am wanting it to work where you can do one Fig section by itself OR all together.

Does any of this make sense? I hope someone can help me out with this.

Also, I am not sure if any of the code is copyrighted or anything. My friend got it for me and told me to just edit it and play around with it. I've tried a lot of different things but a javascript noob like myself is certainly not going to get it on the first few tries.

Thanks and any help is appreciated.

- Brybo

JMRKER · #2 11-07-2009, 01:14 PM

The following does not answer your problem yet, but I did simplify it a bit to make it easier to discuss what it is that you want to change.

I'm a little confused as to why you have <input> tags for values that you don't wish to use in any calculations. To make it easier on the user to know which fields require entries as opposed to those that do not, you might want to put a 'readonly' attribute in the <input>s that will not be allowed to change.
For example:
<span>Fig 1 A <input type="text" size="8" value="0" name="Area1LenFt" readonly /></span>

I changed the Round2Dollars() and Round2() functions for efficiency.

Post back as to which results fields use which input fields.
Perhaps in 3 to 5 formulas?
What are the calculations supposed to represent?
Fig. 1, 2, 3 doesn't help me much in understanding the concepts.

Code:

<html>
<head>
<style type="text/css">
span { background-color: #0162ff; color: #ffffff; padding: 5px; border: solid #000 3px; }

</style>
<script type="text/javascript" >
// From: http://www.webdeveloper.com/forum/showthread.php?t=219570

function Round2Dollars(amount) { return '$'+amount.toFixed(2); }
function Round2(amount) { return amount.toFixed(2); }

function calcul8() {
	var TotalAreaAccum = ((document.forms[0].Area1WidFt.value * 1)*(document.forms[0].Area1WidIn.value * 1)/144);
	TotalAreaAccum = TotalAreaAccum + ((document.forms[0].Area2LenFt.value * 1)*(document.forms[0].Area2WidIn.value * 2)/144);
	TotalAreaAccum = TotalAreaAccum + ((document.forms[0].Area1WidIn.value * 1)*(document.forms[0].Area2LenIn.value * 1)/144);
	
	document.forms[0].TotalSqFt.value = TotalAreaAccum + " ft ²";
	document.forms[0].TotalSqIn.value = TotalAreaAccum * 144 + " in ²";
	document.forms[0].WasteSqFt.value = Round2(TotalAreaAccum * .10);
	document.forms[0].TotalMatlReq.value = Round2(TotalAreaAccum * 1.05);
	document.forms[0].TotalCost.value = Round2Dollars(document.forms[0].TotalMatlReq.value * document.forms[0].CostPSF.value);
	
}

function resetform() {
// Reset field on form to default values
	document.forms[0].Area1LenFt.value = "0";
	document.forms[0].Area1LenIn.value = "0";
	document.forms[0].Area1WidFt.value = "0";
	document.forms[0].Area1WidIn.value = "0";
	
	document.forms[0].Area2LenFt.value = "0";
	document.forms[0].Area2LenIn.value = "0";
	document.forms[0].Area2WidFt.value = "0";
	document.forms[0].Area2WidIn.value = "0";
	
	document.forms[0].Area3LenFt.value = "0";
	document.forms[0].Area3LenIn.value = "0";
	document.forms[0].Area3WidFt.value = "0";
	document.forms[0].Area3WidIn.value = "0";
	
	document.forms[0].CostPSF.value = "$0.00";
	document.forms[0].TotalSqFt.value = "0 ft ²";
	document.forms[0].TotalSqIn.value = "0 in ²";
	document.forms[0].WasteSqFt.value = "0";
	document.forms[0].TotalMatlReq.value = "0";
	document.forms[0].TotalCost.value = "$0.00";
}

</script>
</head>
<body>
<form>
<table align="center" width="80%">
<tr>

<th valign="top">
<span>Fig 1 A <input type="text" size="8" value="0" name="Area1LenFt"/></span><br><br>
<span>Fig 1 B <input type="text" size="8" value="0" name="Area1LenIn"/></span><br><br>
<span>Fig 1 C <input type="text" size="8" value="0" name="Area1WidFt"/></span><br><br>
<span>Fig 1 D <input type="text" size="8" value="0" name="Area1WidIn"/></span>
</th>

<th valign="top">
<span>Fig 2 A <input type="text" size="4" value="0" name="Area2LenFt"/></span><br><br>
<span>Fig 2 B <input type="text" size="4" value="0" name="Area2LenIn"/></span><br><br>
<span>Fig 2 C <input type="text" size="4" value="0" name="Area2WidFt"/></span><br><br>
<span>Fig 2 D <input type="text" size="4" value="0" name="Area2WidIn"/></span>
</th>

<th valign="top">
<span>Fig 3 A <input type="text" size="4" value="0" name="Area3LenFt"/></span><br><br>
<span>Fig 3 B <input type="text" size="4" value="0" name="Area3LenIn"/></span><br><br>
<span>Fig 3 C <input type="text" size="4" value="0" name="Area3WidFt"/></span><br><br>
<span>Fig 3 D <input type="text" size="4" value="0" name="Area3WidIn"/></span>
</th>

<th valign="top">
Calculate Cost + Square Feet/Inches<br>
<input type="button" name="button" onclick="calcul8()" value="CALCULATE"/>
<input type="reset" name="reset" onclick="resetform()" value="CLEAR"/>
<br><br>

<span>Square Feet: <input type="text" size="5" value="0 ft ²" name="TotalSqFt"/></span><br><br>
<span>Square Inches: <input type="text" size="5" value="0 in ²" name="TotalSqIn"/></span><br><br>
<span>Waste/Discarded: <input type="text" size="4" value="0 ft ²" name="WasteSqFt"/></span><br><br>
<span>Total Material: <input type="text" size="5" value="0" name="TotalMatlReq"/></span><br><br>
<span>Grand Total: <input type="text" size="6" value="$0.00" name="TotalCost"/></span>
</th>

</tr>
</table>

<input type="hidden" size="10" value="1.79" name="CostPSF"/>
</form>

</body>
</html>

Brybo · #3 11-07-2009, 03:14 PM

Quote:

Originally Posted by JMRKER

The following does not answer your problem yet, but I did simplify it a bit to make it easier to discuss what it is that you want to change.

I'm a little confused as to why you have <input> tags for values that you don't wish to use in any calculations. To make it easier on the user to know which fields require entries as opposed to those that do not, you might want to put a 'readonly' attribute in the <input>s that will not be allowed to change.
For example:
<span>Fig 1 A <input type="text" size="8" value="0" name="Area1LenFt" readonly /></span>

I changed the Round2Dollars() and Round2() functions for efficiency.

Post back as to which results fields use which input fields.
Perhaps in 3 to 5 formulas?
What are the calculations supposed to represent?
Fig. 1, 2, 3 doesn't help me much in understanding the concepts.

I was going to use the readonly attribute but my friend wants all fields to be usable. This is a calculator for square feet and inches for some kind of material that my friend invented and he is trying to sell. Once the site is up and running, I will show everyone, but for now I gotta get this calculator working.

Here is what is supposed to happen:
All the A B C D fields are inch inputs. My friend wants the customer to be able to type in all the measurements, but only certain ones are being calculated.

Calculations:
Fig1 CxD
+
Fig2 AxD x2
+
Fig3 AxB
(Fig3A value will be what they have for Fig1D)
(Fig3B value will be what they have for Fig2B)
=
Total Area (converted to inches AND feet)

This is how my friend wants it all done.

I've tried changing things around but the math looks OK to me, so I don't know what to do.

Thanks again for the help, if you can.

JMRKER · #4 11-07-2009, 08:23 PM

In the following equation of calcul8()

Code:

	var TotalAreaAccum = ((document.forms[0].Area1WidFt.value * 1)*(document.forms[0].Area1WidIn.value * 1)/144);

How do you expected to multiply 12 ft by 12 in and get 3 sqft?

Should the formula be?

Code:

	var TotalAreaAccum = ((document.forms[0].Area1WidFt.value * 12)*(document.forms[0].Area1WidIn.value * 1)/144);

to have the result in square feet with the division by 144 (which I assume is 1 sqft)

Same questions for the other calculations. It appears you are mixing units.
Try the calculations by hand to see if they make sense to you and then it will be easier to put into formula form.

Brybo · #5 11-08-2009, 05:27 AM

Quote:

Originally Posted by JMRKER

In the following equation of calcul8()

Code:

	var TotalAreaAccum = ((document.forms[0].Area1WidFt.value * 1)*(document.forms[0].Area1WidIn.value * 1)/144);

How do you expected to multiply 12 ft by 12 in and get 3 sqft?

Should the formula be?

Code:

	var TotalAreaAccum = ((document.forms[0].Area1WidFt.value * 12)*(document.forms[0].Area1WidIn.value * 1)/144);

to have the result in square feet with the division by 144 (which I assume is 1 sqft)

Same questions for the other calculations. It appears you are mixing units.
Try the calculations by hand to see if they make sense to you and then it will be easier to put into formula form.

All of the Area#WidFt Area#WidIn Area#LenFt and Area#LenIn are just labels for the input fields. Everything entered, is in inches.

Open the attached zip file, view the html file and try out the calculator to see what I'm talking about.

Brybo · #6 11-08-2009, 04:09 PM

OK let's try this idea:
Download the attached excel spreadsheet file and try out the new custom calculator that I've created.
It works perfectly and is EXACTLY what I want mine to do, but I need a web version to go onto a website.
Keep in mind that fields Fig 3 A and Fig 3 B can be typeable, but I'd rather have the input values from Fig 1 D and Fig 2 B copied automatically into the boxes.

Don't worry about any of the old posts, start fresh with this instead.

If anyone can build a web version of it, major props go out to you!

JMRKER · #7 11-08-2009, 09:08 PM

Spruce it up however you want from here ...

Code:

<html>
<head>
<title>Materials Calculations</title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?p=1046758#post1046758

function el(IDS) {
	return document.getElementById(IDS);
}
function calcul8() {
  	el('a5').value = el('d3').value;
  	el('b5').value = el('b4').value;
  	el('e3').value = (el('c3').value*1 * el('d4').value*1).toFixed(0);
  	el('f3').value = (el('e3').value/144).toFixed(2);
  	el('e4').value = (el('a4').value*1 * el('d4').value*1 * 2).toFixed(0);
  	el('f4').value = (el('e4').value/144).toFixed(2);
  	el('e5').value = (el('b5').value*1 * el('c5').value*1).toFixed(0);
  	el('f5').value = (el('e5').value/144).toFixed(2);
  	
  	var tmp = el('e3').value*1+el('e4').value*1+el('e5').value*1;
  	el('sqin').value = tmp.toFixed(2);
  	    tmp = el('f3').value*1+el('f4').value*1+el('f5').value*1;
  	el('sqft').value = tmp.toFixed(2);
  	el('matreq').value = (el('sqft').value*1.05).toFixed(2);
  	el('cost').value = (el('matreq').value*1.79).toFixed(2);
  	
}

</script>
</head>
<body>
<table border="1">
<tr>
<th></th><th>Inches</th><th>Inches</th><th>Inches</th><th>Inches</th><th>Sq.In.</th><th>Sq.Ft</th>
</tr>
<tr>
<th></th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th>
</tr>
<tr>
<th>Fig. 1</th>
<td><input id="a3" value="12" size="2"></td>
<td><input id="b3" value="12" size="2"></td>
<td><input id="c3" value="12" size="2"></td>
<td><input id="d3" value="12" size="2"></td>
<td><input id="e3" value="" size="6"></td>
<td><input id="f3" value="" size="6"></td>
</tr>
<tr>
<th>Fig. 2</th>
<td><input id="a4" value="12" size="2"></td>
<td><input id="b4" value="12" size="2"></td>
<td><input id="c4" value="12" size="2"></td>
<td><input id="d4" value="12" size="2"></td>
<td><input id="e4" value="" size="6"></td>
<td><input id="f4" value="" size="6"></td>
</tr>
<tr>
<th>Fig. 3</th>
<td><input id="a5" value="" size="2"></td>
<td><input id="b5" value="" size="2"></td>
<td><input id="c5" value="12" size="2"></td>
<td><input id="d5" value="12" size="2"></td>
<td><input id="e5" value="" size="6"></td>
<td><input id="f5" value="" size="6"></td>
</tr>
</table>
<p>
<button onclick="calcul8()">Calculate Totals</button><br>
<table border="1">
<tr>
<td>Square Inches =</td>
<td><input type=text" value="" size="8" id="sqin">
</tr>
<tr>
<td>Square Feet =</td>
<td><input type=text" value="" size="8" id="sqft">
</tr>
<tr>
<td>Material Req. =</td>
<td><input type=text" value="" size="8" id="matreq">
</tr>
<tr>
<td>Cost $ =</td>
<td><input type=text" value="" size="8" id="cost">
</tr>
</table>
</body>
</html>

Good Luck!

Brybo · #8 11-09-2009, 12:22 AM

Holy crap thank you so much. Now all I need is a button to reset all the fields and I'll be set. Could you supply the code for that as well?

Thanks a lot.

JMRKER · #9 11-09-2009, 09:42 AM

You already have the code in your original script.
Just change the references to the new elements.

Brybo · #10 11-09-2009, 03:40 PM

Quote:

Originally Posted by JMRKER

You already have the code in your original script.
Just change the references to the new elements.

I've tried changing the code around and changing the old values to the new ones (Area1LenFt to a3, etc.) and it won't work for me. I've also tried changing a few other ways but I just cannot get anything to work for me. I think I need to go to the library and rent a javascript book or somethning lol.

JMRKER · #11 11-09-2009, 07:23 PM

Change this:

Code:

function resetform() {
	// Reset field on form to default values
	document.forms[0].Area1LenFt.value = "0";
	document.forms[0].Area1LenIn.value = "0";
	document.forms[0].Area1WidFt.value = "0";
	document.forms[0].Area1WidIn.value = "0";
	document.forms[0].Area2LenFt.value = "0";
	document.forms[0].Area2LenIn.value = "0";
	document.forms[0].Area2WidFt.value = "0";
	document.forms[0].Area2WidIn.value = "0";
	document.forms[0].Area3LenFt.value = "0";
	document.forms[0].Area3LenIn.value = "0";
	document.forms[0].Area3WidFt.value = "0";
	document.forms[0].Area3WidIn.value = "0";
	document.forms[0].CostPSF.value = "$0.00";
	document.forms[0].TotalSqFt.value = "0 ft ²";
	document.forms[0].TotalSqIn.value = "0 in ²";
	document.forms[0].WasteSqFt.value = "0";
	document.forms[0].TotalMatlReq.value = "0";
	document.forms[0].TotalCost.value = "$0.00";
}

to this:

Code:

function resetform() {
  el('a3').value = 0;
  el('b3').value = 0;
  el('c3').value = 0;
  el('d3').value = 0;
  el('e3').value = 0;
  el('f3').value = 0;
  
  el('a4').value = 0;
  el('b4').value = 0;
  el('c4').value = 0;
  el('d4').value = 0;
  el('e4').value = 0;
  el('f4').value = 0;

  el('a5').value = 0;
  el('b5').value = 0;
  el('c5').value = 0;
  el('d5').value = 0;
  el('e5').value = 0;
  el('f5').value = 0;
  
  el('sqin').value = '';
  el('sqft').value = '';
  el('matreq').value = '';
  el('cost').value = '';	
}

Brybo · #12 11-09-2009, 08:31 PM

OK now one more thing. How to make it where it does not calculate fig 3 c or fig 3 d.

As a matter of fact, i want to just remove those 2 completely.

I swear I am stupid when it comes to javascript.

JMRKER · #13 11-09-2009, 08:35 PM

Give a shot at what you think needs to be changed.
It is the only way you will ever become more proficient at the language.
Post what you come up with and we'll see if you can become 'smarter' in JS.

Brybo · #14 11-09-2009, 08:41 PM

Well, I tried to just hide the fields by adding the hidden tag into the input type on those 2 fields and that didnt work. I also tried removing pieces of the code out and that didnt work. I just do not know.

I tried simply removing this line:

Code:

  	el('e5').value = (el('b5').value*1 * el('c5').value*1).toFixed(0);

And that didn't work.

I just do not know. That is all that is holding me back.

JMRKER · #15 11-09-2009, 09:05 PM

Well, since you made an attempt ...

I was not sure if you wanted to eliminate all of Fig 3 line or not, so I did.
If you need parts to remain, un-comment the associated lines.

I left in the original code so you could see where the changes occurred.

Code:

<html>
<head>
<title>Materials Calculations</title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?p=1046758#post1046758

function el(IDS) {
	return document.getElementById(IDS);
}
function calcul8() {
//  	el('a5').value = el('d3').value;
//  	el('b5').value = el('b4').value;
  	el('e3').value = (el('c3').value*1 * el('d4').value*1).toFixed(0);
  	el('f3').value = (el('e3').value/144).toFixed(2);
  	el('e4').value = (el('a4').value*1 * el('d4').value*1 * 2).toFixed(0);
  	el('f4').value = (el('e4').value/144).toFixed(2);
//  	el('e5').value = (el('b5').value*1 * el('c5').value*1).toFixed(0);
//  	el('f5').value = (el('e5').value/144).toFixed(2);
  	
  	var tmp = el('e3').value*1+el('e4').value*1;	// +el('e5').value*1;
  	el('sqin').value = tmp.toFixed(2);
  	    tmp = el('f3').value*1+el('f4').value*1;	// +el('f5').value*1;
  	el('sqft').value = tmp.toFixed(2);
  	el('matreq').value = (el('sqft').value*1.05).toFixed(2);
  	el('cost').value = (el('matreq').value*1.79).toFixed(2);
  	
}
function resetform() {
  el('a3').value = 0;
  el('b3').value = 0;
  el('c3').value = 0;
  el('d3').value = 0;
  el('e3').value = 0;
  el('f3').value = 0;
  
  el('a4').value = 0;
  el('b4').value = 0;
  el('c4').value = 0;
  el('d4').value = 0;
  el('e4').value = 0;
  el('f4').value = 0;

//  el('a5').value = 0;
//  el('b5').value = 0;
//  el('c5').value = 0;
//  el('d5').value = 0;
//  el('e5').value = 0;
//  el('f5').value = 0;
  
  el('sqin').value = '';
  el('sqft').value = '';
  el('matreq').value = '';
  el('cost').value = '';	
}

</script>
</head>
<body>
<table border="1">
<tr>
<th></th><th>Inches</th><th>Inches</th><th>Inches</th><th>Inches</th><th>Sq.In.</th><th>Sq.Ft</th>
</tr>
<tr>
<th></th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th>
</tr>
<tr>
<th>Fig. 1</th>
<td><input id="a3" value="12" size="2"></td>
<td><input id="b3" value="12" size="2"></td>
<td><input id="c3" value="12" size="2"></td>
<td><input id="d3" value="12" size="2"></td>
<td><input id="e3" value="" size="6"></td>
<td><input id="f3" value="" size="6"></td>
</tr>
<tr>
<th>Fig. 2</th>
<td><input id="a4" value="12" size="2"></td>
<td><input id="b4" value="12" size="2"></td>
<td><input id="c4" value="12" size="2"></td>
<td><input id="d4" value="12" size="2"></td>
<td><input id="e4" value="" size="6"></td>
<td><input id="f4" value="" size="6"></td>
</tr>
<!--
<tr>
<th>Fig. 3</th>
<td><input id="a5" value="" size="2"></td>
<td><input id="b5" value="" size="2"></td>

<td><input id="c5" value="12" size="2"></td>
<td><input id="d5" value="12" size="2"></td>
-->
<!-- <td>&nbsp;</td> <td>&nbsp;</td> -->
<!--
<td><input id="e5" value="" size="6"></td>
<td><input id="f5" value="" size="6"></td>
</tr>
-->
</table>
<p>
<button onclick="calcul8()">Calculate Totals</button>
<button onclick="resetform()">Clear</button>
<br>
<table border="1">
<tr>
<td>Square Inches =</td>
<td><input type=text" value="" size="8" id="sqin">
</tr>
<tr>
<td>Square Feet =</td>
<td><input type=text" value="" size="8" id="sqft">
</tr>
<tr>
<td>Material Req. =</td>
<td><input type=text" value="" size="8" id="matreq">
</tr>
<tr>
<td>Cost $ =</td>
<td><input type=text" value="" size="8" id="cost">
</tr>
</table>
</body>
</html>

Take out the commented code when you have what you want.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)