Menu
Hi,
I have a javascript I’ve been working on to calculate the price of a Picture Frame, based on the dimensions. I have it so the Price is ((length + width)*2)
//Code Begins Now
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<script type=”text/javascript”>
function calc(nForm){
if (nForm[‘length’].value == “” || nForm[‘width’].value == “” || nForm[‘frame’].value == “”) {
nForm[‘total’].value=”;
return;
}
var price = ((Number(nForm[‘length’].value) + Number(nForm[‘width’].value)*2))
if(document.getElementById(‘glass’).checked==true) price = price + 3;
nForm[‘total’].value = price.toFixed(2);
}
function cknum(n) {
var vn = n.value;
if(isNaN(vn)){ alert(‘Numbers Only, Please Try Again’);
n.value=”;
for (var i=0;i<vn.length;i++) {
if ((isNaN(vn.charAt(i)))&&(vn.charAt(i) !=’.’)) continue;
else n.value+=vn.charAt(i);
n.focus();
}
}
}
</script>
<style type=”text/css”>
body { background-color:#ffffff;
margin-top: 60px;
font-family: tahoma;
}
form { width: 280px;
margin: auto;
}
fieldset { width: 279px;
height: 247px;
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;
}
input { font-family: times;
font-size: 10pt;
text-align: right;
}
select { font-family: times;
font-size: 10pt;
}
.submitBtn { font-family: tahoma;
font-size: 10pt;
text-align: center;
}
p { text-align: center;
padding: 2px;
margin: 2px 0px 2px 0px;
}
.fsize { font-size: 100%; }
.fsize2 { font-size: 80%; }
</style>
</head>
<body>
<form class=”tah” method=”post” action=””>
<fieldset><legend> Picture Frame </legend>
<p class=”fsize”> Picture Dimensions </p>
<p class=”fsize2″><input type=’text’ name=’length’ size=’5′ onchange=”cknum(this)”>"<label> X </label> <input type=’text’ name=’width’ size=’5′ onchange=”cknum(this)”>"</p>
<p><label> Include Glass </label><input type=”checkbox” id=”glass” name=”glass””></p>
<p><label> Frame Design </label></p>
<p><select name=”frame”>
<option value=”” selected> Select a Frame </option>
<option value=”0.44″> 1.5" Slim Rustic </option>
<option value=”0.545″> 2" Classic Rustic </option>
<option value=”0.78″> 3" Broad Rustic </option>
<option value=”0.57″> 1.5" Slim Rawhide </option>
<option value=”0.675″> 2" Classic Rawhide </option>
<option value=”0.9″> 3" Broad Rawhide </option>
<option value=”0.52″> 1.5" Slim Rancher </option>
<option value=”0.625″> 2" Classic Rancher </option>
<option value=”0.88″> 3" Broad Rancher </option>
<option value=”0.61″> 1.5" Slim Brazed </option>
<option value=”0.715″> 2" Classic Brazed </option>
<option value=”0.98″> 3" Broad Brazed </option></select></p>
<p><label> Estimated Price </label></p>
<p><label>$<label><input type=’text’ name=’total’ size=’5′ readonly></p>
<p><input class=”submitBtn” type=”button” value=”Calculate Price” onclick=”calc(this.form);”></p>
</fieldset>
</form>
</body>