...

View Full Version : Calculating Form totals



hans_cellc
10-02-2011, 07:41 PM
Can someone please assist. I am trying to create a order form that auto calculates my totals as I enter the quantities. It comes up with Not a Number(NaN).

Below are snippets from my code this is obviously in a <form>:

HTML:

<!-- Row 3, Col 3 purchase boxes -->
<td colspan="1" height="120" align="left">
<input style="margin-left: 60px" type="text" name="bed_359" size="3" maxlength="3" onchange="calculateValue(this.form)" /> R359</td></tr>

<!-- Row 10, Col 2 Order Value Box-->
<td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="total" size="10"
onfocus="this.form.elements[0].focus()" />
</td></tr>
javaScript:

// Function to calculate order value
function calculateValue(orders) {
var orderValue = 0;
var value = 0;
var itemPrice = 0;
var itemQuantity = 0;

// Run through all the product fields
for(var i = 0; i < orders.elements.length; ++i) {

// Get the current field
formField = orders.elements[i];

// Get the fields name
formName = formField.name;

// Items price extracted from name
itemPrice = parseFloat(formName.substring(formName.lastIndexOf("0") + 1));

// Get the Quantity
itemQuantity = parseInt(formField.value);

// Update the OrderValue
if(itemQuantity >= 0) {
value = itemQuantity * itemPrice;
orderValue += value;
}
}

// Display the total
orders.total.value = orderValue;
}
Please help its probably something simple.

fatecaresx13
10-03-2011, 04:46 AM
Hello there,

Just wanted to follow up with a few short questions. What browser are you running this on? Also, have you tried logging or printing the variables within the function to determine where you're getting a NaN?

Both Chrome and Firefox have great developer tools which may help you determine where there's an issue. I'm going to test this out myself.

Thanks,
Anthony

fatecaresx13
10-03-2011, 09:03 AM
This line here is the issue:


itemPrice = parseFloat(formName.substring(formName.lastIndexOf("0") + 1

formName.lastIndexOf("0"); There is no "0" in bed_359. Not sure what you're meaning to do here but if perhaps 359 is the price you'd want to search for "_" instead maybe?


itemPrice = parseFloat(formName.substring(formName.lastIndexOf("_") + 1


The other change is that you're running this calc on the "total" form element as well so you're going to get every other call working. (Since the total is initially blank). There are many different ways to fix this I'd suggest calling the function more particularly on ONE form element perhaps and linking the next form element accordingly.

Let me know if you need more help.

Thanks,
Anthony

Philip M
10-03-2011, 11:14 AM
See:- http://www.codingforums.com/showthread.php?t=17515.

You will not get any reply in this forum which is intended to be used only to
post a completed (working) script for showcasing/benefit of others.

Before you post again please read the forum rules and posting guidelines.

hans_cellc
10-03-2011, 12:12 PM
hi changed it still no avail I incorrectly posted.
Working on ie9 but same problem on all browsers.

Also tried:
<!-- Row 9, Col 3 purchase boxes -->
<td colspan="1" height="120" align="left">
<select style="margin-left: 60px" name="shirt" value="215" onchange="calculateValue(this.form)" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select> R215</td></tr>

Java'
// Function to calculate order value
function calculateValue(orders) {
var orderValue = 0;
var value = 0;
var itemPrice = 0;
var itemQuantity = 0;

// Run through all the product fields
for(var i = 0; i < orders.elements.length; ++i) {

// Get the current field
formField = orders.elements[i];

// Get the fields name
formValue = formField;

// Items price extracted from name
itemPrice = formField;

// Get the Quantity
itemQuantity = formField.selectedIndex;

// Update the OrderValue
if(itemQuantity > 0) {
orderValue += itemQuantity * itemPrice
}
}

// Display the total
orders.total.value = orderValue.toLocaleString();;
}

hans_cellc
10-03-2011, 04:05 PM
This line here is the issue:


itemPrice = parseFloat(formName.substring(formName.lastIndexOf("0") + 1

formName.lastIndexOf("0"); There is no "0" in bed_359. Not sure what you're meaning to do here but if perhaps 359 is the price you'd want to search for "_" instead maybe?


itemPrice = parseFloat(formName.substring(formName.lastIndexOf("_") + 1


The other change is that you're running this calc on the "total" form element as well so you're going to get every other call working. (Since the total is initially blank). There are many different ways to fix this I'd suggest calling the function more particularly on ONE form element perhaps and linking the next form element accordingly.

Let me know if you need more help.

Thanks,
Anthony
Hi Thanks, Just to make sure this is the line of code you are talking about that needs to be called more specific. And How?


<input name="total" type="text" style="margin-left: 60px" onfocus="this.form.elements[0].focus()" size="10" />

fatecaresx13
10-05-2011, 07:10 AM
Hi Thanks, Just to make sure this is the line of code you are talking about that needs to be called more specific. And How?


<input name="total" type="text" style="margin-left: 60px" onfocus="this.form.elements[0].focus()" size="10" />

I would say have adjacent fields organized like so:

id=x id=x_answer

and when x is called only update x_answer. Something like that. As I said there are many solutions but you don't want to just call the same function when any element is updated because you will inevitably have fields you don't want these calculations on.

jassi.singh
10-05-2011, 09:12 AM
Hi,

Try to validate value of quantity this happens when there is junk character used in calculation. Put default value as 0 and put required expression validator



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum