Menu
Ok background on what I am trying to accomplish. First off this is just me trying to test this code if you can answerthe ultimate part thatd be GREAT. I am creating a page for 5 products(labled 1-5). I have my code to onkey stroke change the Total text box in the form. Once that is complete I have a selection drop down box that has 3 methods with different pricing. I will want to select an option and it selects a price for that value. ex: ground = 3.95. then you press calculate shipping and it addes Total plus shipping and displays in grand total box. here is my code thus far with the selection aprt even it in it.
right now I am just trying to get the code to add my total and 20 for testing but my output keeps coming in NaN any help would be GREAT>
script:
<script type=”text/javascript”>
/* <![CDATA[
var product1 = 0;
var product2 = 0;
var product3 = 0;
var product4 = 0;
var product5 = 0;
function calcproduct1(p1) {
product1 = p1 * 1.25;
calcTotalEstimate();
}
function calcproduct2(p2){
product2 = p2
calcTotalEstimate();
}
function calcproduct3(p3) {
product3 = p3 * 50;
calcTotalEstimate();
}
function calcproduct4(p4) {
product4 = p4
calcTotalEstimate();
}
function calcproduct5(p5) {
product5 = p5 * 35;
calcTotalEstimate();
}
function calcTotalEstimate() {
var total = product1;
total += product2;
total += product3;
total += product4;
total += product5;
document.forms[0].total.value = “$” + total.toLocaleString();
}
function validateInput(keyPressEvent){
if (navigator.appName == “Microsoft Internet Explorer”)
var enteredKey = keyPressEvent.keyCode;
else if (navigator.appName == “Netscape”)
var enteredKey = keyPressEvent.charCode;
var enteredChar = String.fromCharCode(enteredKey);
var retValue = true;
try{
if (!/d/.test(enteredChar) && !/W/.test(enteredChar))
throw “You did not enter a numeric value.”;
}
catch(inputError) {
window.alert(inputError);
retValue = false;
}
finally {
return retValue;
}
}
function checkForNumber(fieldValue) {
var numberCheck = isNaN(fieldValue);
if (numberCheck == true) {
window.alert(“You must enter a numeric value!”);
return false;}
}
function calGrandTotal() {
grand = document.productForm.total.value
grand = Number(grand)
grand2 = 20
grand2 = Number(grand2)
grand3 = (grand + grand2)
document.productForm.grandTotal.value = grand3
}
/* ]]>
</script>
and html code:
<body>
<form name=”productForm” action=”FormProcessor.html” method=”get” enctype=”application/x-www-form-urlencoded”
onsubmit=”return confirmSubmit();”
onreset=”return confirmReset();”>
<table border=”0″>
<tr><td>Product 1</td><td><input name=”p1″ type=”text” onkeypress=”return validateInput(event)” onblur=”calcproduct1(this.value);” /> ($1.25)</td></tr>
<tr><td>Product 2</td><td><input name=”p2″ type=”text” onkeypress=”return validateInput(event)” onblur=”calcproduct2(this.value);” /> (.15)</td></tr>
<tr><td>Product 3</td><td><input name=”p3″ type=”text” onkeypress=”return validateInput(event)” onblur=”calcproduct3(this.value);” /> ($50)</td></tr>
<tr><td>Product 4</td><td><input name=”p4″ type=”text” onkeypress=”return validateInput(event)” onblur=”calcproduct4(this.value);” /> ($25)</td></tr>
<tr><td>Product 5</td><td><input name=”p5″ type=”text” onkeypress=”return validateInput(event)” onblur=”calcproduct5(this.value);” /> ($35)</td></tr>
<tr><td>Total</td><td><input name=”total” type=”text” onkeypress=”return validateInput(event)” onfocus=”this.blur()” /> </td></tr>
<tr><td>Shipping Info</td><td><select name=”shippingMethod”>
<option selected=”selected” value=”ground”>Standard ground UPS</option>
<option value=”usps”>USPS</option>
<option value=”air”>2nd Day Air</option>
</select></td></tr>
<tr><td>Total W/ Shipping</td><td>
<input name=”grandTotal” type=”text” style=”height: 22px” readonly=”readonly” />
<input name=”shipTotalB” type=”button” value=”Calculate Total with shipping” onclick=”calGrandTotal(this.value)” /></td></tr>
</table>