...

View Full Version : Resolved Online Order form?



hans_cellc
10-03-2011, 12:18 PM
I have been playing with two options but just dont seem to get the coding right. Can someone please assist. Using ie9 but same problem with all browsers.

first snippets.
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("_") + 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;
}

Second code:

<!-- 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();;
}

Please help its probably something simple.

Philip M
10-03-2011, 01:29 PM
Tell us what the problem is - don't leave it to us to guess.

BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.


Quizmaster: The TV show "The Merits of Ferrets" stars which kind of animal?
Contestant: I don't know.
Quizmaster: There's a clue, if you know where to look.
Contestant: I'm sorry, no.
Quizmaster (laughing): The answer is ferrets.
Contestant: Well, how was I supposed to know that?

hans_cellc
10-03-2011, 02:58 PM
Sorry man, It gives NaN(not a number) with the first and with the second it just does nothing.

hans_cellc
10-03-2011, 03:03 PM
Thanks I have inserted the code tags as well.

Old Pedant
10-03-2011, 10:17 PM
*what* gives NaN?

And this makes no sense:


<select style="margin-left: 60px" name="shirt" value="215" onchange="calculateValue(this.form)" />

You can't give a value= to a <select> element. Even if you could, that value will change as soon as the user makes a selection in the <select>.

Your system is badly flawed if you are depending on finding the "215" when the form is submitted! It will *NOT* be there!

The basic problem with the code in the second snippet is that it runs through *ALL* the form fields. *ALL* of them. INCLUDING THE TOTAL FIELD! Including any other fields that are *NOT* product <select> fields.

And yet, for EVERY field, you do itemQuantity = formField.selectedIndex; and so the first NON-<select> field you get an error. KABLOOEY! the script stops at that point.

Time to do some rethinking about what you need to accomplish?

hans_cellc
10-03-2011, 10:29 PM
Thanks a mil, let me re look at this I need to uniquely identify the fields I want to run through therefore the error. I am going to give it a bash now. I know snippets can be confusing so attached is the whole code for the HTML, js and CSS. this will give you an indication of what I am trying.

I am brand new to this but am extremely intrigued.

Old Pedant
10-03-2011, 10:36 PM
One way to solve this is to give a class= to the fields that you want to process.

And the name of the class can tell your JS code *how* to process. (Other than that, the class can be a dummy...its only purpose is to aid the JS code.) In JS, you use something like if ( element.className == "xxxx" ) ....


So, for example, if you have a quantity to process, use

<select class="quantity" ...>

If you have a price, use class="price", etc.

Then, in addition, you can look at the type of the form field (tagName and/or type) to determine if you have a <select> or an <input> or what.

hans_cellc
10-03-2011, 10:50 PM
Could it of been so simple, thanks a mil. Changed the code to:


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

and java to:



// Function to calculate order value
function calculateValue(orders) {
var orderValue = 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;

// Is it a "product" field?
if (formName.substring(0,4) == "prod") {

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

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

// Update the OrderValue
if(itemQuantity >= 0) {
orderValue += itemQuantity * itemPrice;
}
}
}
// Display the total
orders.total.value = orderValue.toLocaleString();;
}

It now works perfectly.

Old Pedant
10-03-2011, 11:15 PM
Sure...that works as well.

I thought you were trying to mix <select>s and <input>s and prices and quantities, etc. But if your names include the (hidden) prices, that works great.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum