Okay, I created a sample page.
When you open the html and make a selection from the drop down, it is supposed to add the values and display that in the TOTAL box and then the embedded script should display the total number selected as well.
Both works fine on all browsers except IE8 and lower.
I am breaking on "frm.elements.length" is null or not an object???
And seem to be getting the same error as I step through the code.
Please let me know if you need anything else. Thank you.
Here is the page html:
HTML 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-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="JavaScript" src="/js/form_calculations2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
<!--
function TotalOrder()
{
//document.getElementById('itemsToTotal').innerHTML = "";
var A = parseInt(document.getElementById("FR1").value) || 0;
var B = parseInt(document.getElementById("FR2").value) || 0;
var C = parseInt(document.getElementById("FR3").value) || 0;
var orderplaced = A + B + C;
document.getElementById("ORDERPLACED").innerHTML = orderplaced;
}
-->
</script>
<body>
<div style="width: 100%; float: left">
<!-- End right GrandTotal panel -->
<div style="width: 30%; height:160px; float: left;">
<h3>FAMILY RATE <br>
<span>($45 for the Family)</span></h3>
<br clear="all" />
<div>
<div style="width: 140px; float: left;">ADULTS ($45)</div>
<div style="width: 40px; float: left;">
<select name="CHARGE_ADULT_4500" id="FR1" onKeyUp="CalculateTotal(this.form);TotalOrder()" onChange="CalculateTotal(this.form);TotalOrder()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<br clear="all"/>
<div >
<div style="width: 140px; float: left;">CHILDREN ($0)</div>
<div style="width: 40px; float: left;">
<select name="CHARGE_12UNDER_000" id="FR2" onKeyUp="CalculateTotal(this.form);TotalOrder()" onChange="CalculateTotal(this.form);TotalOrder()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<br clear="all"/>
<div >
<div style="width: 140px; float: left;" >CHILDREN ($0)</div>
<div style="width: 40px; float: left;">
<select name="CHARGE_6UNDER_000" id="FR3" onKeyUp="CalculateTotal(this.form);TotalOrder()" onChange="CalculateTotal(this.form);TotalOrder()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<br clear="all" />
<br/>
<div style="width: 180px; background-color:#CCC; float: left;">
<h4 >TOTAL ATTENDING</h4>
<div style="width: 20px; border: 1px solid rgb(0, 51, 102); BACKGROUND-COLOR: #f5f5f5; color: rgb(0, 51, 102); id='ORDERPLACED'> </div> <br clear="all" /></div>
<br/><br clear="all" />
<div style="width: 40%; background-color:#FFC; float: left; text-align: center">YOUR TOTAL:
<input type="text" readonly name=GRNDTOTAL size=10 STYLE="border: 1px solid rgb(0, 51, 102); BACKGROUND-COLOR: #f5f5f5; color: rgb(0, 51, 102); font-size:16px;" onFocus="this.form.elements[0].focus()" />
</div>
</div>
</div>
</body>
</html>
And here is the form_calculation script (based on Paul McFedries' script) that I am using (already linked in the HTML page)
Code:
// JavaScript Document
function CalculateTotal(frm) {
var order_total = 0
var btn_selected = 0
order_total += 1 * parseFloat(btn_selected/100)
// 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,6) == "CHARGE") {
// If so, extract the price from the name
item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))
// Divide by 100 to get the price in dollars and cents.
item_price = parseFloat(item_price/100)
// Get the quantity
item_quantity = parseInt(form_field.value)
// Update the order total
if (item_quantity >= 1) {
if (item_price == 45) {
item_quantity = 1
}
order_total += item_quantity * item_price
}
}
}
frm.GRNDTOTAL.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
}
//-->
Reply With Quote
Originally Posted by Pullo
Bookmarks