JavaScript calculating

TechChick Guest

Messages:: 4

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#1

Hi all,

I am so lost! I'm trying to do an intranet order form for a guy at work. We both think it would be cool if there was a box at the bottom that automatically totalled the amount when you changed a number. I have been told that JavaScript is the easiest way to do this, but I can't get it to work. I found an example on the web that is exactly what I want, but I'm having a hard time converting it. Here's the example I'm using:

<script type="text/javascript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Created by: www.jdstiles.com -->
<!-- Begin
function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){
  one = document.autoSumForm.firstBox.value;
  two = document.autoSumForm.secondBox.value; 
  document.autoSumForm.thirdBox.value = (one * 1) + (two * 1);
}
function stopCalc(){
  clearInterval(interval);
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<form name="autoSumForm">
<input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> + 
<input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> = 
<input type=text name="thirdBox">
</form>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  1.25 KB -->

Code (markup):

And here's what I've come up with:

<html>
<head>
<script type="text/javascript">
function startCalculate(){
interval=setinterval("Calculate()",1);
}
function Calculate(){
a=ShirtOrderForm.Order.Small.value;
b=ShirtOrderForm.Order.Medium.value;
c=ShirtOrderForm.Order.Large.value;
d=ShirtOrderForm.Order.X-Large.value;
e=ShirtOrderForm.Order.2X-Large.value
ShirtOrderForm.Order.Total.value=12*(a+b+c+d+e);
}
function stopCalc(){
  clearInterval(interval);
}
</script>
</head>
<title>Event Shirt Order Form</title>
<center>
<h1><font color=000099>Event Shirt Order Form</font></h1>
<body bgcolor=66FF00>
</center>
<hr>
<p><font color=000099>Shirts are only $12 each</font></p>
<pre>
<form name="Order" action="mailto:<address>" method="POST" enctype="text/plain"><br>
<font color=000099>Name</font>	<input type=text name="Name" value="" size="35"><img border="0" src="shirt5.gif" alt="Shirt" width="335" height="315" align="right"><br> 
<font color=000099>E-Mail</font>	<input type=text name="Email" value="" size="35"><br>
<font color=000099>Small</font>	<input type=text name="Small" value="" size="10" onFocus="startCaluclate()";onBlur="stopCalc;"><br>
<font color=000099>Medium</font>	<input type=text name="Medium" value="" size="10" onFocus="startCaluclate()";onBlur="stopCalc;"><br>
<font color=000099>Large</font>	<input type=text name="Large" value="" size="10" onFocus="startCaluclate()";onBlur="stopCalc;"><br>
<font color=000099>X-Large</font>	<input type=text name="X-Large" value="" size="10" onFocus="startCaluclate()";onBlur="stopCalc;"><br>
<font color=000099>2X</font>	<input type=text name="2X-Large" value="" size="10" onFocus="startCaluclate()";onBlur="stopCalc;"><br>
<font color=000099>Total</font>	<input type=text name="Total" size="10">
<br>
<input type="submit" value="Submit Order"> <input type="reset" value="Clear">
</form>
</pre>
<p><font color=000099>After clicking submit, click ok and then open Outlook and send the mail located in your outbox.</font></p>
<p><font color=000099>You will recieve confirmation of your order shortly.</font></p>
<p><font color=000099>If you have any questions, please feel free to contact <a href="mailto:<address>?subject=Shirt%20Question">Bob</a>.</font></p>
</body>
</html>

Code (markup):

Help please.

Thanks

TechChick, Aug 1, 2006 IP

TechChick Guest

Messages:: 4

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#2

Well, after playing with it I got the code to where it no longer crashes IE, however my debugger still says I have errors and it still won't add up. The debugger, unfortunately, only tells me I have an error and what type of error, it doesn't say where, and since I'm new at this, the type of error doesn't help. Here's my new code:

<html>
	<head>
		<script language="javascript">
function Calc();{
var a=document.Order.Small.value;
var b=document.Order.Medium.value;
var c=document.Order.Large.value;
var d=document.Order.X-Large.value;
var e=document.Order.2X-Large.value;
document.Order.Total.value=12*(a+b+c+d+e);
};
		</script>
	</head>
	<title>Event Shirt Order Form</title>
	<center>
		<h1><font color="000099">Event Shirt Order Form</font></h1>
		<body bgcolor="66FF00">
	</center>
	<hr>
	<p><font color="000099" size="5">Shirts are only $12 each</font></p>
	<p><font color="000099" size="5">After clicking submit, click ok and then open Outlook 
			and send the mail located in your outbox.</font></p>
	<p><font color="000099" size="5">You will recieve confirmation of your order shortly.</font></p>
	<pre>
<form name="Order" action="<address>?subject=Shirt Order" method="POST" enctype="text/plain"><br>
<font color=000099 size="4">Name</font>		<input type=text name="Name" value="" size="35"><img border="0" src="shirt5.gif" alt="Shirt" width="335" height="315" align="right"><br> 
<font color=000099 size="4">E-Mail</font>	<input type=text name="Email" value="" size="35"><br>
<font color=000099 size="4">Small</font>		<input type=text name="Small" value="" size="10" onchange=function(Calc())><br>
<font color=000099 size="4">Medium</font>	<input type=text name="Medium" value="" size="10" onchange=function(Calc())><br>
<font color=000099 size="4">Large</font>		<input type=text name="Large" value="" size="10" onchange=function(Calc())><br>
<font color=000099 size="4">X-Large</font>	<input type=text name="X-Large" value="" size="10" onchange=function(Calc())><br>
<font color=000099 size="4">2X</font>		<input type=text name="2X-Large" value="" size="10" onchange=function(Calc())><br>
<font color=000099 size="4">Total</font>		<big>$</big><input type=text name="Total" size="10"><br>
<input type="submit" value="Submit Order"> <input type="reset" value="Clear">
</form>
</pre>
	<p><font color="000099" size="5">If you have any questions, please feel free to contact <a href="<address>?subject=Shirt%20Question">
				Bob</a>.</font></p>
	</body>
</html>

Code (markup):

Any help is greatly appreciated.

TechChick, Aug 3, 2006 IP

AnimeGround Guest

Messages:: 15

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#3

There was a few errors.
I recommend you validator your html with validator.w3.org

Here's a list of errors in your javascript (in order to trace the bugs in the code you made)

The title was inserted after the <head>
<body> tag was not at the good place
The variable 2X cannot be set, javascript consider 2 as a number rather than being part of a variable. Changed to XX
Alot of errors with case, example setinterval isn't the same as setInterval
Alot of errors like "onFocus="startCaluclate()";onBlur="stopCalc;" rather than onfocus="startCalculate()" onblur="stopCalc()"
ShortOrderForm isn't defined removed from calculation
XX-Large is not accepted as name "-" is considered as an operation in javascript.

I've cleaned a bit the coding with a css, you should learn it it's pretty easy and save alot of coding

<html>
<head>

<title>Event Shirt Order Form</title>

<style type='text/css'>
	 <!--
	    body {color: #000099; background-color: #66FF00 }
	 //-->
</style>

<script type="text/javascript">
	<!--
		function startCalculate(){
			interval=setInterval("Calculate()",10);
		}

		function Calculate(){
			var a=document.Order.Small.value;
			var b=document.Order.Medium.value;
			var c=document.Order.Large.value;
			var d=document.Order.XLarge.value;
			var e=document.Order.XXLarge.value
			document.Order.Total.value=12*(a+b+c+d+e);
		}

		function stopCalc(){
		  clearInterval(interval);
		}
	//-->		
</script>

</head>
<body>
<center>
<h1>Event Shirt Order Form</h1>
<hr />
<p>Shirts are only $12 each</p>

<form name="Order" action="mailto:aa@aa.com" method="POST" enctype="text/plain">
<table align='center'>
		<tr>
				<td>
						<table align='center'>
								<tr>
										<td>Name</td>
										<td><input type="text" name="Name" value="" size="35" /></td>
								</tr>
								<tr>
									<td>E-mail</td>
									<td><input type="text" name="Email" value="" size="35" /></td>
								</tr>
								<tr>
									<td>Small</td>
									<td><input type="text" name="Small" onfocus="startCalculate()" onblur="stopCalc()" value="" size="35" /></td>
								</tr>		
								<tr>
									<td>Medium</td>
									<td><input type="text" name="Medium" onfocus="startCalculate()" onblur="stopCalc()" value="" size="35" /></td>
								</tr>
								<tr>
									<td>Large</td>
									<td><input type="text" name="Large" onfocus="startCalculate()" onblur="stopCalc()" value="" size="35" /></td>
								</tr>
								<tr>
									<td>X-Large</td>
									<td><input type="text" name="XLarge" onfocus="startCalculate()" onblur="stopCalc()" value="" size="35" /></td>
								</tr>
								<tr>
									<td>2X</td>
									<td><input type="text" name="XXLarge" onfocus="startCalculate()" onblur="stopCalc()" value="" size="35" /></td>
								</tr>		
								<tr>
									<td>Total</td>
									<td><input type="text" name="Total" onfocus="startCalculate()" onblur="stopCalc()" size="10" /></td>
								</tr>					
						</table>											
				</td>
				<td rowspan='8'>
					<img border="0" src="shirt5.gif" alt="Shirt" width="335" height="315" />
					<br /><br />
				</td>
		</tr>
		<tr align='center'>
			<td colspan='2'><input type="submit" value="Submit Order" /><input type="reset" value="Clear" /></td>
		</tr>
</table>
</form>

<p>After clicking submit, click ok and then open Outlook and send the mail located in your outbox.</p>
<p>You will recieve confirmation of your order shortly.</p>
<p>If you have any questions, please feel free to contact <a href="mailto:aa@aa.com?subject=Shirt%20Question">Bob</a>.</p>
	
</center>
</body>
</html>

Code (markup):

Hope this helps!

AnimeGround, Aug 3, 2006 IP

TechChick Guest

Messages:: 4

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#4

I got an answer back about this code on another forum too, so I tried both of your answers, and then a mix of the answers, and it still won't work. When I run it, my debugger (Visual Studio) says that it is expecting a semi-colon at the startCalc() in the header, and an object at the startCalc() and stopCalc() sections in the body. Visual Studio also says I can't put <script type="text/javascript">, instead I have to put <script language="javascript">. Do you know anything that would be causing these errors?
(I also keep getting the red squiggly lines that means I did something wrong that [I don't think] really effects the code. Like that <form> can't be nested in <pre>, and <pre>, <p>, <hr>, <center>, and <title> can't be nested in <html>, do these erros efffect anything? And how can I fix them without breaking IE?)

TechChick, Aug 4, 2006 IP

TechChick Guest

Messages:: 4

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#5

I got it!!!!!!!! A guy at work helped me figure out the code, and here it is (for anyone else who needs something like this)

<html> 
   <head> 
      <script language="javascript"> 
function calc() 
{ 
var a=document.Order.Small.value; 
var b=document.Order.Medium.value; 
var c=document.Order.Large.value; 
var d=document.Order.XL.value; 
var e=document.Order.XXL.value; 
document.Order.Total.value=12*((a*1)+(b*1)+(c*1)+(d*1)+(e*1)); 
} 
      </script> 
   </head> 
   <title>Event Shirt Order Form</title> 
   <center> 
      <h1><font color="000099">Event Shirt Order Form</font></h1> 
      <body bgcolor="66FF00"> 
   </center> 
   <hr> 
   <p><font color="000099" size="5">Shirts are only $12 each</font></p> 
   <p><font color="000099" size="5">After clicking submit, click ok and then open Outlook 
         and send the mail located in your outbox.</font></p> 
   <p><font color="000099" size="5">You will recieve confirmation of your order shortly.</font></p> 
   <pre> 
<form name="Order" action="mailto:meataol.com?subject=Shirt Order" method="POST" enctype="text/plain"><br> 
<font color=000099 size="4">Name</font>      <input type=text name="Name" value="" size="35"><img border="0" src="shirt5.gif" alt="Shirt" width="335" height="315" align="right"><br> 
<font color=000099 size="4">E-Mail</font>   <input type=text name="Email" value="" size="35"><br> 
<font color=000099 size="4">Small</font>      <input type=text name="Small" onchange="calc()" value="" size="10"><br> 
<font color=000099 size="4">Medium</font>   <input type=text name="Medium" onchange="calc()" value="" size="10"><br> 
<font color=000099 size="4">Large</font>      <input type=text name="Large" onchange="calc()" value="" size="10"><br> 
<font color=000099 size="4">XL</font>      <input type=text name="XL" onchange="calc()" value="" size="10"><br> 
<font color=000099 size="4">2XL</font>      <input type=text name="XXL" onchange="calc()" value="" size="10"><br> 
<font color=000099 size="4">Total</font>      <big>$</big><input type=text name="Total" onchange="calc()" size="10"><br> 
<input type="submit" value="Submit Order"> <input type="reset" value="Clear"> 
</form> 
</pre> 
</body> 
</html>

Code (markup):

Thanks for all the help!

TechChick, Aug 4, 2006 IP

todd-imc Guest

Messages:: 1

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#6

I am doing almost the same exact thing, but I need the total of two functions to be placed in the another text box. Basically I have 1 function for one thing in the form, and then I have another function for something else in the form. And then I need the result of the two functions to be added and placed in to a "Grand Total" text box.

Here is the code that I have right now:


<script language="javascript"> 
function transportation_calc() 
{ 
var a=document.form1.transportation_miles.value;  
document.form1.transportation_subtotal.value=(a*7.50); 
}

function interpreter_calc()
{
var b=document.form1.interpretation_time.value;
document.form1.interpreter_subtotal.value=(b*12.50);
} 

/*
function grand_total_calc()
var c=document.form1.transportation_subtotal.value;
var d=document.form1.interpreter_subtotal.value;
document.form1.grand_total.value=((c*1)+(d*1));
}
*/

</script>


----------------------


<tr>
<td class="formtext">Transportation Miles:</td>
<td><input name="transportation_miles" onChange="transportation_calc()" type="text" class="forminnertext" tabindex="42" size="7" maxlength="7" /></td>
<td class="formtext">Phone/Fax #:</td>
<td><input type="text" size="18" name="interpreter_phone_fax"  class="forminnertext"tabindex="54" /></td>
</tr>
<tr>
<td class="formtext">Other:</td>
<td><input type="text" size="18" name="transportation_other" class="forminnertext" tabindex="44" /></td>
<td class="formtext">Interpretation Time:</td>
<td><input type="text" size="18" name="interpretation_time" onChange="interpreter_calc()" class="forminnertext" tabindex="55" /></td>
</tr>
<tr>
<td class="formtext">Sub Total:</td>
<td class="formtext">$<input type="text" size="18" name="transportation_subtotal" onChange="transportation_calc()" class="forminnertext" tabindex="45" /></td>
<td class="formtext">Total Interpretation Time:</td>
<td><input type="text" size="18" name="total_interpretation_time" class="forminnertext" tabindex="56" /></td>
</tr>
<tr>
<td class="formtext">&nbsp;</td>
<td>&nbsp;</td>
<td class="formtext">Other:</td>
<td><input type="text" size="18" name="interpreter_other" class="forminnertext" tabindex="56" /></td>
</tr>
<tr>
<td class="formtext">&nbsp;</td>
<td>&nbsp;</td>
<td class="formtext">Sub Total:</td>
<td class="formtext">$<input type="text" size="18" name="interpreter_subtotal" onChange="interpreter_calc()" class="forminnertext" tabindex="56" /></td>
</tr>
<tr>
<td class="formtext">&nbsp;</td>
<td>&nbsp;</td>
<td class="formtext"> Grand Total:</td>
<td class="formtext">$<input type="text" size="18" name="grand_total" onChange="grand_total_calc()" class="forminnertext" /></td>
</tr>

Code (markup):

Any help would be appreciated

todd-imc, Aug 18, 2006 IP

Log in or Sign up

Advertising (learn more)

JavaScript calculating

TechChick Guest

TechChick Guest

AnimeGround Guest

TechChick Guest

TechChick Guest

todd-imc Guest

Log in or Sign up

Advertising (learn more)

JavaScript calculating

TechChick Guest

TechChick Guest

AnimeGround Guest

TechChick Guest

TechChick Guest

todd-imc Guest

Useful Searches