...

View Full Version : Price Calculator



jazco
01-04-2007, 05:00 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>

Ancora
01-04-2007, 01:34 PM
jazco:

Perimeter is not: 2* length * width. It's (2 * length) + (2 * width).



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function calc(nForm){

if (nForm['length'].value == "" || nForm['width'].value == "" || nForm['frame'].value == "")
{
return;
}
var price = (((nForm['length'].value * 2) + (nForm['width'].value * 2)) * nForm['frame'].value) + Number(5);
nForm['total'].value = price.toFixed(2);
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:280px;margin:auto}
fieldset {width:260px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:georgia;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
label {font-family:times;font-size:12pt;color:#00008b;padding:5px;display:block;margin-left:20px}
input {font-family:times;font-size:12pt;margin-left:35px;text-align:right}
select {font-family:times;font-size:10pt;margin-left:25px}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px;text-align:center}

</style>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Frame Price Calculator</legend>
<label>Length: <input type='text' name='length' size='5' onblur="calc(this.form)"></label>
<label>Width:&nbsp;&nbsp;<input type='text' name='width' size='5' onblur="calc(this.form)"></label>
<select name="frame" onchange="calc(this.form)">
<option value="" 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>
<label>Total:&nbsp;&nbsp;&nbsp;<input type='text' name='total' size='5' readonly></label>

<input type='submit' name='submit' value="Submit" class='submitBtn'>
</fieldset>
</form>
</body>
</html>

jazco
01-04-2007, 06:11 PM
Wow! Thanks, but how would I had a conditional equation to it. Like you created the frame so it would multiply the square area by the thickness which depended on the users selection. I need it to multiply the answer by either 0.27 if its a 1.5" thick frame, 0.23 if its a 2" frame and 0.18 if its a 3" frame. Because without it a simple 3" by 3" frame would be $23, which is way to expensive so we multiply by the numbers above to put into the price range.

Ancora
01-04-2007, 07:09 PM
jazco:

I have a name, please address me by it. It is very difficult to understand you.

The square area is length * width. Wow! is meaningless. Try "thank you" and "please." There's nothing "conditional" about courtesy.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function calc(nForm){

if (nForm['length'].value == "" || nForm['width'].value == "" || nForm['frame'].value == "")
{
return;
}
var price = (Number(nForm['length'].value) * Number(nForm['width'].value)) * Number(nForm['frame'].value) + Number(5);
nForm['total'].value = price.toFixed(2);
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:280px;margin:auto}
fieldset {width:260px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:georgia;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
label {font-family:times;font-size:12pt;color:#00008b;padding:5px;display:block;margin-left:20px}
input {font-family:times;font-size:10pt;margin-left:35px;text-align:right}
select {font-family:times;font-size:10pt;margin-left:25px}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px;text-align:center}

</style>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Frame Price Calculator</legend>
<label>Length: <input type='text' name='length' size='5' onblur="calc(this.form)"></label>
<label>Width:&nbsp;&nbsp;<input type='text' name='width' size='5' onblur="calc(this.form)"></label>
<select name="frame" onchange="calc(this.form)">
<option value="" selected>Select a Frame</option>
<option value=".27">1.5" Narrow Barnwood</option>
<option value=".23">2" Rustic Barnwood</option>
<option value=".18">3" Thick Barnwood</option>
</select>
<label>Total:&nbsp;&nbsp;&nbsp;<input type='text' name='total' size='5' readonly></label>

<input type='submit' name='submit' value="Submit" class='submitBtn'>
</fieldset>
</form>
</body>
</html>

jazco
01-04-2007, 07:45 PM
Thank Ancora for your help, I really appreciate it.

Ancora
01-04-2007, 08:00 PM
You're welcome, jazco.

I appreciate your courtesy. Good luck with your project.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum