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
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.
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!
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?)
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!
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"> </td> <td> </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"> </td> <td> </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"> </td> <td> </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