Help Converting VBScript to JavaScript

[DakotaChick]

Hi guys,
I need some help converting this VBScript over to JavaScript so that the calculations will work properly in browsers other than IE.

You can take a look at Turn 2 Design (http://turn2designsc.com/quote.asp) for a feel about what I'm trying to do, but basicly, I just need to calculate the cost of the selected items based on the selected quantity of that item.

The only thing I know about JavaScript is the small Pop-up scripts I've been able to litterally copy and paste to implement. So, please, dont just post code, post an explaination of whats going on and why so I can try to figure it out.


The VBScript Code:
(I didnt include all of the product functions since they are all exactly the same as the posted on, only different names)

<script language="vbscript">
sub Window_OnLoad()
totalCost()
end sub
<!-----------Total Cost Function----------->
sub totalCost()
totals = 25
totals = totals + document.quote.BW1Price.value
totals = totals + document.quote.CS18Price.value
totals = totals + document.quote.CM15Price.value
totals = totals + document.quote.CM11Price.value
totals = totals + document.quote.TM14Price.value
totals = totals + document.quote.CB1Price.value
totals = totals + document.quote.MP1Price.value
totals = totals + document.quote.ST1Price.value
totals = totals + document.quote.TSSLCLGPrice.value
totals = totals + document.quote.TSSWLGPrice.value
totals = totals + document.quote.TSSLCPrice.value
totals = totals + document.quote.TSSWPrice.value
totals = totals + document.quote.LP2Price.value
totals = totals + document.quote.LP1Price.value
document.quote.Total.value = formatcurrency(totals)
end sub
<!-----------Product Function----------->
sub CalcBW1()
num = document.quote.BW1Qty.value * 4.75
document.quote.BW1Price.value = num
totalCost()
end sub
</script>



The HTML Form Code:

<form id="quote" name="quote" method="post" action="quote-ac.asp">
<table width="40%" border="0" align="center" cellpadding="5" cellspacing="2">
<tr>
<td width="8%">&nbsp;</td>
<td width="69%" class="BodyText"><div align="left">Graphic Set Up</div></td>
<td width="23%" class="BodyText"><div align="left">Required</div></td>
</tr>

<tr>
<td>
<a href="javascript:poptastic('19');">
<img src="images/art021.gif" width="15" height="15" border="0" /> </a>
</td>
<td class="BodyText"><div align="left">
<input name="BW1" type="text" class="Quote1" id="BW1" readonly="readonly" value="Beverage Wrap" /></div></td>
<td class="BodyText">
<div align="left">
<select name="BW1Qty" id="BW1Qty" onchange="CalcBW1()">
<option value="0" selected="selected">0</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<input type="hidden" name="BW1Price" id="BW1Price" value="0" />
</div>
</td>
</tr>
<!-- More Items Here, but code is exactly the same as the above textbox, select box, and hidden box -->
<tr>
<td>&nbsp;</td>
<td class="BodyText"><div align="right"><strong>Total:</strong></div></td>
<td class="BodyText"><div align="left">
<input name="Total" type="text" class="Quote" id="Total" size="10" readonly="readonly" />
</div></td>
</tr>
<tr>
<td colspan="3"><div align="right">
<input name="button" type="submit" class="Buttons" id="button" value="Request Appt" />
</div></td>
</tr>
</table>
</form>

[DakotaChick]

Well after days of sifting through many pages of javascript tutorials that make absolutely no sense to me, this is what ive come up with and it doesnt work....no suprize really...can someone please help me figure out whats going on and how to make it work.


<script language="javascript">
Window_OnLoad = totalCost;
function TotalCost() {
var totals = 25;
totals = totals + number(document.getElementById('TSSWPrice'));
totals = totals + number(document.getElementById('TSSLCPrice'));
totals = totals + number(document.getElementById('TSSWLGPrice'));
totals = totals + number(document.getElementById('TSSLCLGPrice'));
totals = totals + number(document.getElementById('CM11Price'));
totals = totals + number(document.getElementById('CM15Price'));
totals = totals + number(document.getElementById('CS18Price'));
totals = totals + number(document.getElementById('TM14Price'));
totals = totals + number(document.getElementById('BW1Price'));
totals = totals + number(document.getElementById('ST1Price'));
totals = totals + number(document.getElementById('CB1Price'));
totals = totals + number(document.getElementById('MP1Price'));
totals = totals + number(document.getElementById('LP1Price'));
totals = totals + number(document.getElementById('LP2Price'));
document.getElementById('Total').innerHTML = totals.toFixed(2);
}
<!-----------Product Function----------->
function CalcTSSW() {
num = document.getElementById('TSSW') * 16.00;
document.getElementById('TSSWPrice').innerHTML = num;
totalCost();
}


Html Form code:

<form id="quote" name="quote" method="post" action="quote-ac.asp">
<table width="50%" border="0" align="center" cellpadding="7" cellspacing="0" class="QuoteTbl">
<tr>
<td width="8%" bgcolor="#00CC00">&nbsp;</td>
<td width="73%" bgcolor="#00CC00" class="BodyText"><div align="left" class="QuoteTblDiv"><strong>Item</strong></div></td>
<td width="19%" bgcolor="#00CC00" class="BodyText"><div align="center" class="QuoteTblDiv"><strong>Quantity</strong></div></td>
</tr>
<tr>
<td bgcolor="#66FF66">&nbsp;</td>
<td bgcolor="#66FF66" class="BodyText"><div align="left" class="QuoteTblDiv">Graphic Set Up</div></td>
<td bgcolor="#66FF66" class="BodyText"><div align="center" class="QuoteTblDiv">Required</div></td>
</tr>

<tr bgcolor="#C4FFC4">
<td>
<div class="QuoteTblDiv">
<a href="javascript:poptastic('1');">
<img src="images/art021.gif" width="20" height="20" border="0" />
</a>
</div>
</td>
<td class="BodyText" valign="top"><div align="left" class="QuoteTblDiv">
Short Sleeved T-Shirt <br />(White, Sublimation)
</div></td>
<td class="BodyText">

<div align="center" class="QuoteTblDiv">
<input name="TSSW" type="text" class="Buttons" id="TSSW" onchange="CalcTSSW()" size="3">
<input type="hidden" name="TSSWPrice" id="TSSWPrice" value="0" />
</div></td>
</tr>

<tr>
<td bgcolor="#00CC00">&nbsp;</td>
<td bgcolor="#00CC00" class="BodyText"><div align="right" class="QuoteTblDiv"><strong>Total:</strong></div></td>
<td bgcolor="#00CC00" class="BodyText">
<div align="center" class="QuoteTblDiv">
<input name="Total" type="text" class="Quote" id="Total" size="8" readonly="readonly" />
</div></td>
</tr>
<tr>
<td colspan="3" bgcolor="#00CC00"><div align="right" class="QuoteTblDiv">
<input name="button" type="submit" class="Buttons" id="button" value=" Request Appt " />
</div></td>
</tr>
</table>
</form>

[Nilpo]

Returning the elements isn't enough....you need to return their values. Use the value attribute for that.

<script language="javascript">
Window_OnLoad = totalCost;
function TotalCost() {
var totals = 25;
totals = totals + number(document.getElementById('TSSWPrice').value);
totals = totals + number(document.getElementById('TSSLCPrice').value);
totals = totals + number(document.getElementById('TSSWLGPrice').value);
totals = totals + number(document.getElementById('TSSLCLGPrice').value);
totals = totals + number(document.getElementById('CM11Price').value);
totals = totals + number(document.getElementById('CM15Price').value);
totals = totals + number(document.getElementById('CS18Price').value);
totals = totals + number(document.getElementById('TM14Price').value);
totals = totals + number(document.getElementById('BW1Price').value);
totals = totals + number(document.getElementById('ST1Price').value);
totals = totals + number(document.getElementById('CB1Price').value);
totals = totals + number(document.getElementById('MP1Price').value);
totals = totals + number(document.getElementById('LP1Price').value);
totals = totals + number(document.getElementById('LP2Price').value);
document.getElementById('Total').innerHTML = totals.toFixed(2);
}
<!-----------Product Function----------->
function CalcTSSW() {
num = document.getElementById('TSSW').value * 16.00;
document.getElementById('TSSWPrice').innerHTML = num;
totalCost();
}

[shyam]

Returning the elements isn't enough....you need to return their values. Use the value attribute for that.

<script language="javascript">
Window_OnLoad = totalCost;
function TotalCost() {
var totals = 25;
totals = totals + number(document.getElementById('TSSWPrice').value);
...
document.getElementById('Total').innerHTML = totals.toFixed(2);
}
<!-----------Product Function----------->
function CalcTSSW() {
num = document.getElementById('TSSW').value * 16.00;
document.getElementById('TSSWPrice').innerHTML = num;
totalCost();
}

u set up a function to execute on page load using
window.onload = TotalCost;
also javascript is case-sensitive totalCost <> TotalCost u set the values of form elements also using the value attribute and not using the innerHTML property

[DakotaChick]

Thanks for the replys. I made the changes suggested, but things still arent working quite right.

1) The onLoad doesnt work
2) When I have number(document.getElementById('TSSW').Value) it throws an error about Object Expected
3) With out number() it calculates but the output is 25[insert long string of letters here]

Heres the code after the suggested changes:
<script language="javascript">
Window_OnLoad = TotalCost;
function TotalCost() {
var totals = 25;
totals = totals + document.getElementById('TSSWPrice').value;
totals = totals + document.getElementById('TSSLCPrice').value;
totals = totals + document.getElementById('TSSWLGPrice').value;
totals = totals + document.getElementById('TSSLCLGPrice').value;
totals = totals + document.getElementById('CM11Price').value;
totals = totals + document.getElementById('CM15Price').value;
totals = totals + document.getElementById('CS18Price').value;
totals = totals + document.getElementById('TM14Price').value;
document.getElementById('Total').value = totals;
}
<!-----------Product Function----------->
function CalcTSSW() {
num = document.getElementById('TSSW').value * 12.00;
document.getElementById('TSSWPrice').value = num;
TotalCost();
}
</script>

[Nilpo]

That's because it's still using VBScript event procedure syntax. It needs to be changed as indicated in the previous post.<script language="javascript">
Window.OnLoad = TotalCost;
function TotalCost() {
var totals = 25;
totals = totals + document.getElementById('TSSWPrice').value;
totals = totals + document.getElementById('TSSLCPrice').value;
totals = totals + document.getElementById('TSSWLGPrice').value;
totals = totals + document.getElementById('TSSLCLGPrice').value;
totals = totals + document.getElementById('CM11Price').value;
totals = totals + document.getElementById('CM15Price').value;
totals = totals + document.getElementById('CS18Price').value;
totals = totals + document.getElementById('TM14Price').value;
document.getElementById('Total').value = totals;
}
<!-----------Product Function----------->
function CalcTSSW() {
num = document.getElementById('TSSW').value * 12.00;
document.getElementById('TSSWPrice').value = num;
TotalCost();
}
</script>

[Nilpo]

Alternatively, you can add it to your <body> tag.<body onload="javascript:TotatCost();">You should also avoid using the language attribute of the script tag. You should include its type attribute instead.<script type="text/javascript">

[DakotaChick]

Sorry, the problem with the window_onload wasnt very clearly explained the first time. Still changed that to the body onload like shown and it still doesnt work. throws an error about object expected. and the above listed additional mathematical problems are still problems.

<script type="text/javascript">
function TotalCost {
var totals = 25;
totals = totals + document.getElementById('TSSWPrice').value;
totals = totals + document.getElementById('TSSLCPrice').value;
totals = totals + document.getElementById('TSSWLGPrice').value;
totals = totals + document.getElementById('TSSLCLGPrice').value;
totals = totals + document.getElementById('CM11Price').value;
totals = totals + document.getElementById('CM15Price').value;
totals = totals + document.getElementById('CS18Price').value;
totals = totals + document.getElementById('TM14Price').value;
document.getElementById('Total').value = totals;
}
<!-----------Product Function----------->
function CalcTSSW() {
var num = document.getElementById('TSSW').value * 12.00;
document.getElementById('TSSWPrice').value = num;
TotalCost();
}
</script>

[SouthwaterDave]

You've dropped the brackets from the TotalCost function this time. That line should be (with the change highlighted in red):function TotalCost() {