This must be the most commonly asked question yet I could not find the answer to my problem.
I have a script to perform some simple calculations on my site and everything works fine on all browsers, but not in IE8 or below. I searched the whole world for an answer, but couldn’t find it, but then I saw one of you solving a similar problem here. So I thought I would ask.
I have this following as the DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US">
The script stopped working also when I change to strict.dtd.
Here is the script in question:
<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 D = parseInt(document.getElementById('SR1').value) || 0;
var E = parseInt(document.getElementById('SR2').value) || 0;
var orderplaced = A + B + C + D + E;
document.getElementById('ORDERPLACED').innerHTML = orderplaced;
}
// -->
</script>
============================================
Supposed to add the values of few fields and show the total items selected. But all I get is a zero for the value. It is doing something but the answer is always Zero.
I am using text/javascript.
Should I change the single quotes to double quotes for FR1,2 etc and for ORDERPLACED id tags?
Any help would be greatly appreciated. I can send you the complete code and link in a separate email.
Hi,
I’m sorry, but to be able to help you, I’d need to see the code here.
This is so that any solution to your problem can potentially help others in the future.
I understand if you don’t want to or are not able to post your code here.
Maybe someone else will be able to give you some help based on what you have already provided.
Indeed I understand that. The solution has to be available to everyone who follow this thread.
I will see if I can recreate a sample and post it here. The whole page is too cumbersome to post and don’t know if it would work for you with the links to all it’s styles, js etc. If I can create I’ll post it here. Thank you.
This is what I mean by a boiled down example.
Just enough code to reproduce your problem, but nothing more.
This is also what I do personally when I run up against a coding problem. I find that this approach helps me to focus on the problem at hand and more often than not, producing a bare bones example of what’s not working, leads me to a solution, or at least points me in the right direction.
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.
And here is the form_calculation script (based on Paul McFedries’ script) that I am using (already linked in the HTML page)
// 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
}
//-->
Then I also tried changing my TotalOrder() as follows, as I was seeing errors at getElementById, but that did not seem to help either.
<script language="javascript" type="text/javascript">
<!--
function TotalOrder()
{
//document.getElementById('itemsToTotal').innerHTML = "";
var A = parseInt(document.myForm("FR1").value) || 0;
var B = parseInt(document.myForm("FR2").value) || 0;
var C = parseInt(document.myForm("FR3").value) || 0;
var orderplaced = A + B + C;
document.myForm("ORDERPLACED").innerHTML = orderplaced;
}
-->
</script>
Thanks for trying to put together a more concise example. That’s a good start.
Unfortunately, when I try and run your code it doesn’t work in any browser.
From what I see of your code, it seems that you have two select menus where you can chose the number of adults and the number of children attending an event.
You are then trying to dynamically update the total cost based on what has been selected.
Instead of trying to debug your code, I put together a simple script which does what I have just described.
That is very kind of you. I will try it this evening. What I send you was only part of my calculations script, but I still need to add couple of more sections like that one for Single only at $10 a piece. Also for the family rate, the amount is fixed at $45 for the whole family. I will try to modify the code to get it working for my needs, because your code looks so simple and elegant. Thank you.
Well, I feel terrible. All I did was I tried to add couple of additional fields, updated script and for some reason it just wouldn’t cooperate with me.
totalPeople = countAdults + countChildren;
peopleText = countAdults + ' adults and ' + countChildren + ' children (' + totalPeople + ' in total)';
countChildren is not defined anywhere.
Try changing it to countChild or something.
A little tip: get yourself some kind of JavaScript debugger to find errors like this.
If you are using Chrome, for example, press F12 and select the “Console” tab, then refresh the page.
I just have one more question, if I could ask… I wanted to pass the value of the total cost to another autoresponds form, how can I do that. I tried the following, but that is not quite working. I am not all that familiar with how to handle objects using javascript.
I have added a field GRNDTOTAL2 and then tried to call $GRNDTOTAL2 in the other form, but didn’t work.
I don’t know if I can pass the GRNDTOTAL in any other manner.
Okay I am one more step closer… I was about to give up after trying so many different variants. With very little javascript knowledge, it just becomes a matter of trial and error.
With the code below I can display the value on the main page, but $GRNDTOTAL2 is not holding the value in the next page.
I kept the new hidden <input> field GRNDTOTAL2 and set its value as follows:
var display = document.getElementById("GRNDTOTAL2");
display.value = totalCost;
Yes, I just want to pass the value of the Cost to a confirmation page & email which will be sent to the User. I am using formMail for processing the form. I have no problem sending all the other fields like the number of adult, child etc because the field name is processed, but when the ID values are getting processed, the value is not carried through to the email.
I have the menu options like this. Here the value of the SR_UNDER6 gets passed on to the autoresponds form. I am using SR2 for calcualtions in the script you provided…
So I created a hidden input field with name=GRNDTOTAL2 and added the following codes. The correct value is now displayed on the main form (hidden removed for debugging), but still does not get passed on to the confirmation page.
That’s the correct way to go about it.
You would have something like this:
<form action="myscript.php" method="post">
... All of your form stuff ...
<input type="hidden" name="total" id="hiddenTotal">
<input type="submit" value="Submit">
</form>
Then when your JavaScript has done its calculations, update both the <span> so as to give the user the visual feedback that everything is good and also update the hidden field, so that when the form is submitted you have access to the value you need in the $_POST array in your PHP script.