Menu
Hello all.
I currently have a form that auto does the math for when a person adds a number to a quantity text field. Currently the amount for the quantity field comes from the name of the field. The quantity field pertains to a dropdown next to it with sizes in it. The problem I am having is that all the sizes have different prices. So as it stands right now the price is hard coded for all. I need it to be able to change based on the drop downs choice.
I hope this makes sense. If not let me know how I can explain it better. Here is my code.
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Language” content=”en-us” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Form</title>
<script language=”JavaScript” type=”text/javascript”>
<!–
function CalculateTotal(frm) {
var order_total = 0
// Run through all the form fields
for (var i=0; i < frm.elements.length; ++i) {
// Get the current field
form_field = frm.elements[i]
// Get the field’s name
form_name = form_field.name
// Is it a “product” field?
if (form_name.substring(0,4) == “PROD”) {
// If so, extract the price from the name
item_price = parseFloat(form_name.substring(form_name.lastIndexOf(“_”) + 1))
// Get the quantity
item_quantity = parseInt(form_field.value)
// Update the order total
if (item_quantity >= 0) {
order_total += item_quantity * item_price
}
}
}
// Display the total rounded to two decimal places
frm.TOTAL.value = round_decimals(order_total, 2)
frm.TOTAL2.value = round_decimals(order_total, 2)
}
function round_decimals(original_number, decimals) {
var result1 = original_number * Math.pow(10, decimals)
var result2 = Math.round(result1)
var result3 = result2 / Math.pow(10, decimals)
return pad_with_zeros(result3, decimals)
}
function pad_with_zeros(rounded_value, decimal_places) {
// Convert the number to a string
var value_string = rounded_value.toString()
// Locate the decimal point
var decimal_location = value_string.indexOf(“.”)
// Is there a decimal point?
if (decimal_location == -1) {
// If no, then all decimal places will be padded with 0s
decimal_part_length = 0
// If decimal_places is greater than zero, tack on a decimal point
value_string += decimal_places > 0 ? “.” : “”
}
else {
// If yes, then only the extra decimal places will be padded with 0s
decimal_part_length = value_string.length – decimal_location – 1
}
// Calculate the number of decimal places that need to be padded with 0s
var pad_total = decimal_places – decimal_part_length
if (pad_total > 0) {
// Pad the string with 0s
for (var counter = 1; counter <= pad_total; counter++)
value_string += “0”
}
return value_string
}
//–>
</script>
</head>
<table>
<tr>
<td>
<input class=”AMOUNT” name=”TOTAL” onfocus=”this.form.elements[2].focus()” value=”0.00″ />
</td>
</tr>
<tr>
<td>
<select name=”size”>
<option selected=”selected”>-</option>
<option>Sm</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>2XL</option>
<option>3XL</option>
</select></td>
<td>
<input type=”text” name=”PROD_StormBlue-8535_14.96″ onChange=”CalculateTotal(this.form)” style=”width: 24px” />
</td>
</tr>
</table>
You can see above the price comes from the name of the text field. PROD_StormBlue-8535_14.96. The price is the end number, 14.96. Is there any way to have that number be dynamic based on the options of the dropdown instead of just a flat number? I appreciate any help on this.
Thanks again.