Menu
[B]Calculate Button
Hi,
I have been modifying a code for a picture frame size calculator, but I can’t seem to get a “calculate” button on it. Right now I have it so it automatically displays the answer once all the information is received in the form, but I don’t the answer to be displayed until a “calculate” button is pressed. Whenever I try to put a calculate button in the script, it never displays the correct answer. For example I tell it to display var price, and after I push the calculate button it says “price”. Thanks
<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)*2)) * (Number(nForm[‘frame’].value) * Number(0.22)) + Number(5);
nForm[‘total’].value = price.toFixed(2);
}
</script>
<style type=”text/css”>
body {background-color:#ffffff;margin-top:60px}
form {width:280px;margin:auto}
fieldset {width:260px;background-color:#ffffff;border:1px solid #87ceeb}
legend {font-family:georgia;font-size:14pt;color:#00008b;background-color:#8ffffff;padding-left:3px;padding-right:3px;margin-bottom:5px}
label {font-family:times;font-size:12pt;color:#ffffff;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 style=”width: 279; height: 227″>
<legend><font face=”Tahoma”>Picture Frame Without Glass</font></legend>
<p align=”center”><font face=”Tahoma” size=”4″>
Picture Dimensions</font><p align=”left”><label>
<font face=”Tahoma”> <input type=’text’ name=’length’ size=’5′ onblur=”calc(this.form)”>"
X <input type=’text’ name=’width’ size=’5′ onblur=”calc(this.form)”>"</font></label></p>
<p align=”center”><font size=”4″ face=”Tahoma”>Frame Design</font></p>
<p align=”center”><font face=”Tahoma”>
<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> </font></p>
<p align=”center”><font size=”4″ face=”Tahoma”>Estimated Price</font><label><font face=”Tahoma”><font size=”4″>
</font></font></label></p>
<p align=”center”><label><font face=”Tahoma”>$<input type=’text’ name=’total’ size=’5′ readonly></font></label><font face=”Tahoma”>
</p>
</font>
</fieldset>
</form>
</body>
</font><font face=”Tahoma”>
<script type=”text/javascript”>
function calc2(nForm){
if (nForm[‘length’].value == “” || nForm[‘width’].value == “” || nForm[‘frame’].value == “”)
{
return;
}
var price = ((Number(nForm[‘length’].value) + Number(nForm[‘width’].value)*2)) * (Number(nForm[‘frame’].value) * Number(0.22)) + Number(7);
nForm[‘total’].value = price.toFixed(2);
}
</script>
<style type=”text/css”>
body {background-color:#ffffff;margin-top:60px}
form {width:280px;margin:auto}
fieldset {width:260px;background-color:#ffffff;border:1px solid #87ceeb}
legend {font-family:georgia;font-size:14pt;color:#00008b;background-color:#ffffff;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>
</font>
<p> </p>
<body>
<form method=”post” action=””>
<fieldset style=”width: 284; height: 227″>
<legend><font face=”Tahoma”>Picture Frame With Glass</font></legend>
<p align=”center”><font face=”Tahoma” size=”4″>Picture
Dimensions</font><p align=”center”><label><font face=”Tahoma”> <input type=’text’ name=’length’ size=’5′ onblur=”calc2(this.form)”>"
X <input type=’text’ name=’width’ size=’5′ onblur=”calc(this.form)”>"</font></label></p>
<p align=”center”><font face=”Tahoma” size=”4″>Frame Design</font></p>
<p align=”center”><font face=”Tahoma”> <select name=”frame” onchange=”calc2(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> </font></p>
<p align=”center”><label><font face=”Tahoma”><font size=”4″>
Estimated Price</font>: </font></label></p>
<p align=”center”><label><font face=”Tahoma”>$<input type=’text’ name=’total’ size=’5′ readonly></font></label><font face=”Tahoma”>
</p>
</font>
</fieldset>
</font>
</form>