JavaScript Forum

**jazco** · 12:09 AM

I am trying to create a price calculator that automatically calculates the price of custom made picture frame. I got an equation that finds the square area of the frame by multiplying the perimeter (2*length*width) by the thickness (which the user can choose from 1.5", 2" or 3"). Then it multiplies it by a decimal number (0.27 if the frame is 1.5" thick, 0.23 if its 2" thick, and 0.18 if its 3" thick). Then it adds a $5 custom made fee to the final answer. But when I save it to an html file and load it in Internet Explorer, it doesn't calculate. Do you guys have an idea how to make it work?
<SCRIPT LANGUAGE="JavaScript">
function calculate_total(){
var length = Number(document.
getElementById('calc').
length.value);
var width = Number(document.
getElementById('calc').
width.value);
var frame = Number(document.
getElementById('calc').
frame.options
[document.getElementById('calc...
frame.options.
selectedIndex].value);
var total = (2 * (length + width)) * frame;
switch (frame){
case 1.5:
total = total * 0.27;
break;
case 2:
total = total * 0.23;
break;
case 3:
total = total * 0.18;
break;
}
document.getElementById('calc'... = total + 5;
}
</script>
Sorry the cut off code so you might have to concatenate some lines above this if you have questions let me know.
And here is the form I used, again its very basic but it works.
<form name="calc" id="calc">
Length: <input type="text" name="length" onchange="calculate_total()" /><br />
Width: <input type="text" name="width" onchange="calculate_total()" /><br />
<select name="frame" onchange="calculate_total()">
<option value="0" selected>Select a Frame</option>
<option value="1.5">1.5" Narrow Barnwood</option>
<option value="2">2" Rustic Barnwood</option>
<option value="3">3" Thick Barnwood</option>
</select>
<br />
<br />
Total: <input id="total" name="total"/>
</form>

**willcode4beer** · 01-04-2007, 10:54 AM

I see a lot of problems preventing this from working.
Instead of taking it line by line, I'm going to suggest this alternative (I tested with firefox and IE).
Please double check the formula where indicated by the comment. Your description of the formula and your code didn't match so, I'm making a bit of a guess.

Code:

<html>
<head>
<title>Frame Price Calculator</title>

<style type="text/css">
label {
    display: block;
    float: left;
    width: 6em;
}
</style>

<script type="text/javascript">// <![CDATA[
var customFee = 5;

function calculate_total(formObj){
    var customFee = new Number(formObj.customFee.value);
    var length = new Number(formObj.frameLength.value);
    var width = new Number(formObj.frameWidth.value);
    var thickness = 0;
    var opts = formObj.frameThickness.options;
    /* Find the value of the selected option */
    for(var i=0; i<opts.length;i++){
        if(opts[i].selected){
            thickness = new Number(opts[i].value);
        }
    }
    /* Double check that this is he correct formula */
    var basePrice = 2 * length * width;
    var price = basePrice * thickness + customFee;
    formObj.total.value = price;
}
// ]]></script>
</head>
<body>

<form name="calc" id="calc">
    <div>
        <label for="frameLength">Length:</label>
        <input type="text" name="frameLength" onchange="calculate_total(this.form)" />
    </div>
    <div>
        <label for="frameWidth">Width:</label>
        <input type="text" name="frameWidth" onchange="calculate_total(this.form)" />
    </div>
    <div>
        <label for="frameThickness">Frame</label>
        <select name="frameThickness" onchange="calculate_total(this.form)">
            <option value="0" selected>Select a Frame</option>
            <option value="0.27">1.5" Narrow Barnwood</option>
            <option value="0.23">2" Rustic Barnwood</option>
            <option value="0.18">3" Thick Barnwood</option>
        </select>
    </div>
    <div>
        <label for="customFee">Custom fee:</label>
        <input type="text" name="customFee" value="5.00" disabled="disabled"/>
    </div>
    <div>
        <label>Total:</label>
        <input id="total" name="total"/>
    </div>
</form>

</body>
</html>

Hope that helps