Form calculation help

[madk]

Hello all,

Javascript is completely new to me so please bear with me. I have a small HTML form that I need to use to calculate a price. I am having a hard time figuring out how to handle this due to my limited knowledge. Here is a simplified version of the form:

<form action="buy_tag.php" method="post" name="form">
Font Size:<br />
<select id = "font_size" name="font_size">
<option value="14">14 (Default)</option>
<option value="20">20 (Add $2)</option>
</select>
Text color:<br />
<select id = "font_color" name="font_color">
<option value="000000">Black (Default)</option>
<option value="FFFFFF">White</option>
</select><br />
Background:<br />
<select id = "bg_color" name="bg_color">
<option value="FFFFFF">White (Default)</option>
<option value="334433" style = "background-color: #334433">Add $2</option>
</select><br />
<br />
<input type="submit" value = "Submit Tag!" />
</form>

So what I need to do is start with a base price of 0 and then add $ based on the drop box selections and display the price updates in real time.

Could someone point me in the correct direction? Thanks in advance.

[madk]

Ok figured it out. Seems to be working well in Firefox but i'm not getting anything in IE. I'll post a followup later if I can't figure it out.

[Trace]

<script type="text/javascript">
function calculatePrice(){
var theAmount = 0;
var theSize = document.getElementById('fontSize').selectedIndex;
var theColor = document.getElementById('bgColor').selectedIndex;

switch(theSize){
case 1: theAmount = parseInt(theAmount + 2); break;
case 2: theAmount = parseInt(theAmount + 4); break;
case 3: theAmount = parseInt(theAmount + 6); break;
}
switch(theColor){
case 1: theAmount = parseInt(theAmount + 2); break;
case 2: theAmount = parseInt(theAmount + 4); break;
case 3: theAmount = parseInt(theAmount + 6); break;
}
document.getElementById('endPrice').innerHTML = '$' + theAmount
}
</script>

<form action="buy_tag.php" method="post" name="form">
<p>
Font Size:<br />
<select id="fontSize" onchange="calculatePrice()">
<option value="14">14 (Default)</option>
<option value="20">20 (Add $2)</option>
<option value="20">26 (Add $4)</option>
<option value="20">32 (Add $6)</option>
</select>
</p>
<p>
Text color:<br />
<select id="fontColor">
<option value="000000">Black (Default)</option>
<option value="FFFFFF">White</option>
<option value="FF0000">Red</option>
<option value="0000FF">Blu</option>
</select>
</p>
<p>
Background:<br />
<select id="bgColor" onchange="calculatePrice()">
<option value="FFFFFF">White (Default)</option>
<option value="334433" style = "background-color: #334433">Add $2</option>
<option value="334433" style = "background-color: #3333CC">Add $4</option>
<option value="334433" style = "background-color: #006633">Add $6</option>
</select>
</p>
<br />
<div id="endPrice"></div>
<br />
<input type="submit" value = "Submit Tag!" />
</form>

[madk]

Amazingly I cam up with an almost identical solution. Only issue was that I have my onchange event on the options elements and IE didn't like that.

All is working well now. Thanks!