...

View Full Version : help with javascript calculation



randomguy83
02-06-2007, 11:11 PM
hi, i have this form with a subtotal button but I can't seem to call the function to add the appropriate values.

basically, there are 3 products to choose from and the user can enter quantity values for each accordingly.

there are also three different shipping options, with different prices.

i want to call the function calc so that it will add the numbers correctly but the function doesn't even run... whats goin on?

randomguy83
02-06-2007, 11:20 PM
It produces a Nan or other values that are inappropriate. I guess i have to make sure that the quantity values are > 0 first. how would i approach this?

here is my code btw:

<html>
<body>

<script type="text/javascript">



function Calc()

{

var total1 = document.myForm.p1.value;
var total2 = document.myForm.p2.value;
var total3 = document.myForm.p3.value;

var subtotal;
var shippingtotal;

subtotal=(total1*1.25)+(total*2.25)+(total*3.25);
shippingtotal=document.myForm.shipping.value;

document.myForm.total.value=subtotal+shippingtotal;


}

</script>

<body bgcolor="#555555">

<form action="#" method="post" name="myForm" id="myForm" onsubmit="return verify(this);">
<table align="center" border="1">
<tr>
<td><input type="checkbox" id="ckbox1" name="ckbox1" onclick="checkboxClick(this);" /> Product 1</td>
<td>@ 1.25 <input type="text" id="p1" name="p1" size="5" value="" /> Quantity</td>
</tr>
<tr>
<td><input type="checkbox" id="ckbox2" name="ckbox2" onclick="checkboxClick(this);" /> Product 2</td>
<td>@ 2.25 <input type="text" id="p2" name="p2" size="5" /> Quantity</td>
</tr>
<tr>
<td><input type="checkbox" id="ckbox3" name="ckbox3" onclick="checkboxClick(this);" /> Product3</td>
<td>@ 3.25 <input type="text" id="p3" name="p3" size="5" /> Quantity</td>

</tr>
<tr>
<td>Ship to:</td>
<td>
<table border="1">
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="address" id="address" /></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" name="city" id="city" /></td>
</tr>
<tr>
<td>State:</td>
<td>
<select name="state" id="state" >
<option value="">--Select State--</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="PR">PR</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>
</td>
</tr>
<tr>
<td>Zip:</td>
<td><input type="text" name="zip" id="zip" /></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" name="phonenumber" id="phonenumber" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Shipping:</td>
<td>
<select name="shipping">
<option value="">Select...</option>
<option value="3.50">Standard @ $3.50</option>
<option value="5">2-3 days @ $5.00</option>
<option value="7.5">Overnight @ $7.50</option>
</select>
</td>
</tr>
<tr>
<td><input type="button" value="subtotal" name="subtotal" id="subtotal" onclick="Calc(this);" /></td>
<td><input type="text" name="total" id="total" /></td>
</tr>
<tr>
<td><input type="radio" name="creditcard" id="creditcard" />MasterCard</td>
<td rowspan="2">
<input type="text" name="cardnum" id="cardnum" />
</td>
</tr>
<tr>
<td><input type="radio" name="creditcard" id="creditcard" />Visa</td>
</tr>
<tr>
<td><input type="submit" name="submit" id="submit" value="submit" /></td>
<td><input type="reset" name="reset" id="reset" value="reset" /></td>
</table>
</form>

</body>
</html>

thesmart1
02-07-2007, 01:03 AM
First off, you're using non-existent variables when you define subtotal. Try:

subtotal=(total1*1.25)+(total2*2.25)+(total3*3.25);


Second, use an if...else statement to check the quantities:

if (total1>0 && total2>0 && total3>0){
subtotal=(total1*1.25)+(total2*2.25)+(total3*3.25);
shippingtotal=document.myForm.shipping.value;

document.myForm.total.value=subtotal+shippingtotal;
}
else {
alert("One or more of the quantities you specified is zero.")
}

neomaximus2k
02-07-2007, 10:54 AM
I had the same problem, I generated an invoice creator for my business which did the same thing untill i used parseFloat().

i'd suggest you try using parseFloat() on all your form fields to make sure they are floating numbers then try and do the maths :)



function Calc(){

var total1 = parseFloat(document.myForm.p1.value);
var total2 = parseFloat(document.myForm.p2.value);
var total3 = parseFloat(document.myForm.p3.value);

var subtotal = 0;
var shippingtotal = 0;

subtotal = (total1*1.25) + (total*2.25) + (total*3.25);
shippingtotal = parseFloat(document.myForm.shipping.value);

formtotal = subtotal + shippingtotal;
document.myForm.total.value = formtotal.toFixed(2);


}

of course this function has no error capturing so personally i would do something like this...


function Calc(){

var total1 = parseFloat(document.myForm.p1.value);
var total2 = parseFloat(document.myForm.p2.value);
var total3 = parseFloat(document.myForm.p3.value);

if (total1 < 0.01 || total2 < 0.01 || total3 < 0.01){
alert("Please enter valid numbers greater than 0");
} else {
var subtotal = 0;
var shippingtotal = 0;

subtotal = (total1*1.25) + (total*2.25) + (total*3.25);
shippingtotal = parseFloat(document.myForm.shipping.value);

formtotal = subtotal + shippingtotal;
document.myForm.total.value = formtotal.toFixed(2);
}


}

you should also check the input first to make sure it isn't letters

Kor
02-07-2007, 12:35 PM
value attribute returns a string, not a decimal number, so that before any math addition/subtraction operation you must transform those strings into decimal numbers. parseFloat() is one of the methods, but not the best, as it returns NaN when the value is an epmty string.

Number() method is to be used, as it returns 0 when there is an empty value.


var total1 = Number(document.myForm.p1.value);
var total2 = Number(document.myForm.p2.value);
var total3 = Number(document.myForm.p3.value);
var shippingtotal=Number(document.myForm.shipping.value);
var subtotal=(total1*1.25)+(total*2.25)+(total*3.25);
document.myForm.total.value=subtotal+shippingtotal;

But in this case you must make sure that "shiping" list has always a value, thus you should rather make it:


<select name="shipping">
<option value="0">Select...</option>
<option value="3.50">Standard @ $3.50</option>
<option value="5">2-3 days @ $5.00</option>
<option value="7.5">Overnight @ $7.50</option>
</select>

or better


<select name="shipping">
<option value="3.50">Standard @ $3.50</option>
<option value="5">2-3 days @ $5.00</option>
<option value="7.5">Overnight @ $7.50</option>
</select>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum