Design + Coding > Javascipt CalculateTotals() Function not working
Rob,
Note: I'm using [ ... ] in place of < ... > to avoid editor problems here:
If you are really dropping ALL that code into a Squarespace page, it's not surprising that you are having problems. You have html [/head] and [/html] statements in there!!
(a) This is not logical from an html point of view (where are the matching [head] and [html] statements?)
(b) That code could not be valid if it were inserted into any html page using any content management system, because the part before the [/head] obviously has to go in the [head] area of your html, and the part that follows therefore must go into the [body] area, yet there is no html [body] statement following the [/head]
(c) None of those structural html statements can be placed into Squarespace content, because Squarespace is already generating all the structural code for the page -- for more specifics see this diagram: Core Template Containers (PDF).
You have to use the Squarespace "code injection" feature to insert scripts into your [head] area, put CSS styles in your Custom CSS file, and use the Raw HTML editor to add html code on a page (or in a sidebar section).
And leave out all structural html tags like [html], [head], [/head], [body], [/body], [/html] because all those tags are already present in the code that is being generated by Squarespace for every page of your site.
--Chris
Chris Loosley
Thanks! now it seems pretty obvious - I'll give it a try
Will I have to use CSS to specify using that header code for only the one page where I have the calculator or does it matter? And if I do have to would it be through creating a div and specifying it to the #modulePage1234567?
Thanks again
Rob
Rob,
I have not tried to understand what all this code is doing, but I would be surprised if the following general statement were not true in this case:
When a widget you are including on your site consists of HTML code together with script(s) and (sometimes) also CSS styles, the script and CSS code normally refers to one or more html object classes or id's that appear in the html code. So they will normally have no effect on other parts of your site. The only thing that can cause problems is the added code using a popular name for its class(es) or id(s), like "content" or "section" for example, because then that code may collide with a name that Squarespace uses for one of its generated html objects. But that is rarely a problem in practice.
So try it, and see what happens. If you have insurmountable problems, and you want someone here to look at it, post a link to the page.
--Chris
Chris Loosley
I split the code up and put the the <head> code into the header using the code injection points and the into the raw html editor of the page I want the the calculator on but the CalculateTotals() function still is not working.
If someone could have a look I would really appreciate it - here's the link
Thanks
Rob
I have created a calculator in Javascript on Dreamweaver and it works when I test it on IE and Firefox. When I load it into the WYSWYG interface in the html block of code the colors are wrong but the calculator is functional. However, when I edit it, or just reopen the WYSWYG interface the colors change to what they should be but font sizes change and the calculator no longer functions... at all. If I drop in in as raw HTML it looks right but does not function... AAAHHH! I have no idea what is going on with it.
Here is my code - exactly how I drop it in. Thanks for the help! (hopefully)
<script language="JavaScript">
<!--
function CalculateTotals(){
f=document.orderform;
f.pps1.value=parseInt(f.ink.value)+parseInt(f.color.value)+5+parseInt(f.locations.value);
f.total1.value=parseInt(f.qty1.value)*parseInt(f.pps1.value);
f.pps2.value=parseInt(f.ink2.value)+parseInt(f.color2.value)+8+parseInt(f.locations2.value);
f.total2.value=parseInt(f.qty2.value)*parseInt(f.pps2.value);
f.pps3.value=parseInt(f.ink3.value)+parseInt(f.color3.value)+11+parseInt(f.locations3.value);
f.total3.value=parseInt(f.qty3.value)*parseInt(f.pps3.value);
f.pps4.value=parseInt(f.ink4.value)+parseInt(f.color4.value)+13+parseInt(f.locations4.value);
f.total4.value=parseInt(f.qty4.value)*parseInt(f.pps4.value);
f.pps5.value=parseInt(f.ink5.value)+parseInt(f.color5.value)+10+parseInt(f.locations5.value);
f.total5.value=parseInt(f.qty5.value)*parseInt(f.pps5.value);
f.pps6.value=parseInt(f.ink6.value)+parseInt(f.color6.value)+20+parseInt(f.locations6.value);
f.total6.value=parseInt(f.qty6.value)*parseInt(f.pps6.value);
f.qtytotal.value=parseInt(f.qty1.value)
+parseInt(f.qty2.value)
+parseInt(f.qty3.value)
+parseInt(f.qty4.value)
+parseInt(f.qty5.value)
+parseInt(f.qty6.value);
f.subtotal.value=parseInt(f.total1.value)
+parseInt(f.total2.value)
+parseInt(f.total3.value)
+parseInt(f.total4.value)
+parseInt(f.total5.value)
+parseInt(f.total6.value);
if (parseInt(f.qtytotal.value)<50)
f.discount.value=parseInt(f.subtotal.value)*0;
else if (parseInt(f.qtytotal.value)>=50 && parseInt(f.qtytotal.value)<=99)
f.discount.value=parseInt(f.subtotal.value)*0.1;
else
f.discount.value=parseInt(f.subtotal.value)*0.15;
f.grandtotal.value=parseInt(f.subtotal.value)-parseInt(f.discount.value);
}
//-->
</script>
<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//-->
</SCRIPT>
<style>
<!--
a{text-decoration:none}
//-->
</style>
</head>
<form name="orderform" method="post" action="formprocessor">
<table width="615" border=".5
" bordercolor="0000FF" cellpadding="3" background="price logo.png">
<tr>
<th width="120" bordercolor="#FFFFFF">Description</th>
<th width="84" bordercolor="#FFFFFF">Shirt: White or Color</th>
<th width="47" bordercolor="#FFFFFF">Ink Colors</th>
<th width="73" bordercolor="#FFFFFF">Design Locations</th>
<th width="118" bordercolor="#FFFFFF">Price per Shirt</th>
<th width="34" bordercolor="#FFFFFF">Qty</th>
<th width="81" bordercolor="#FFFFFF">Total</th>
</tr>
<tr>
<td align="center"><font size="+2">T-Shirts</font></td>
<td align="right"><label>
<select name="Color" id="color" onBlur="CalculateTotals()">
<option value="0" selected>White</option>
<option value="1">Colored</option>
</select>
</label></td>
<td align="right"><label>
<select name="ink" id="ink" onBlur="CalculateTotals()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
</label> </td>
<td align="center"> <select name="locations" id="locations" onBlur="CalculateTotals()">
<option value="0" selected>1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select> </td>
<td align="right">$
</td>
<td align="right"></td>
<td align="right">$
</td>
</tr>
<tr>
<td align="center"><font size="+2">Longsleeve</font></td>
<td align="right"><label>
<select name="Color2" id="color2" onBlur="CalculateTotals()">
<option value="0" selected>White</option>
<option value="1">Colored</option>
</select>
</label></td>
<td align="right"><label>
<select name="ink2" id="ink2" onBlur="CalculateTotals()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
</label> </td>
<td align="center"> <select name="locations2" id="locations2" onBlur="CalculateTotals()">
<option value="0" selected>1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select> </td>
<td align="right">$
</td>
<td align="right"></td>
<td align="right">$
</td>
</tr>
<tr>
<td align="center"><font size="+2">Tank Tops</font> </td>
<td align="right"><label>
<select name="Color3" id="color3" onBlur="CalculateTotals()">
<option value="0" selected>White</option>
<option value="1">Colored</option>
</select>
</label></td>
<td align="right"><label>
<select name="ink3" id="ink3" onBlur="CalculateTotals()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
</label> </td>
<td align="center"> <select name="locations3" id="locations3" onBlur="CalculateTotals()">
<option value="0" selected>1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select> </td>
<td align="right">$
</td>
<td align="right"></td>
<td align="right">$
</td>
</tr>
<tr>
<td align="center"><font size="+2">Polos</font> </td>
<td align="right"><label>
<select name="Color4" id="color4" onBlur="CalculateTotals()">
<option value="0" selected>White</option>
<option value="1">Colored</option>
</select>
</label></td>
<td align="right"><label>
<select name="ink4" id="ink4" onBlur="CalculateTotals()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
</label> </td>
<td align="center"> <select name="locations4" id="locations4" onBlur="CalculateTotals()">
<option value="0" selected>1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select> </td>
<td align="right">$
</td>
<td align="right"></td>
<td align="right">$
</td>
</tr>
<tr>
<td align="center"><font size="+2">Sweatshirts</font> </td>
<td align="right"><label>
<select name="Color5" id="color5" onBlur="CalculateTotals()">
<option value="0" selected>White</option>
<option value="1">Colored</option>
</select>
</label></td>
<td align="right"><label>
<select name="ink5" id="ink5" onBlur="CalculateTotals()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
</label> </td>
<td align="center"> <select name="locations5" id="locations5" onBlur="CalculateTotals()">
<option value="0" selected>1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select> </td>
<td align="right">$
</td>
<td align="right"></td>
<td align="right">$
</td>
</tr>
<tr>
<td align="center"><font size="+2">Hoodies</font> </td>
<td align="right"><label>
<select name="Color6" id="color6" onBlur="CalculateTotals()">
<option value="0" selected>White</option>
<option value="1">Colored</option>
</select>
</label></td>
<td align="right"><label>
<select name="ink6" id="ink6" onBlur="CalculateTotals()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
</label> </td>
<td align="center"> <select name="locations6" id="locations6" onBlur="CalculateTotals()">
<option value="0" selected>1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select> </td>
<td align="right">$
</td>
<td align="right"></td>
<td align="right">$
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="center" bordercolor="#FFFFFF">TOTALS:</td>
<td align="right"></td>
<td align="right">$ </td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="center" bordercolor="#FFFFFF"><font color="#00CC33" size="+1">QTY DISCOUNT</font></td>
<td align="center"></td>
<td align="right" bordercolor="#009933"><font color="#00CC33">-$ </font>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="center" bordercolor="#FFFFFF">GRAND TOTAL</td>
<td></td>
<td align="right">$ </td>
</tr>
</table>
</form>
<SCRIPT TYPE="text/javascript">
<!--
f=document.orderform;
f.qty1.value=0; f.qty2.value=0;
f.qty3.value=0; f.qty4.value=0;
f.qty5.value=0; f.qty6.value=0;
f.total1.value=0; f.total2.value=0;
f.total3.value=0; f.total4.value=0;
f.total5.value=0; f.total6.value=0;
f.pps1.value=5; f.pps2.value=8;
f.pps3.value=11; f.pps4.value=13;
f.pps5.value=10; f.pps6.value=20;
f.discount.value=0;
f.sh.value=5;
f.subtotal.value=0;
f.grandtotal.value=5;
//-->
</script>
</html>