JavaScript calculator doesn't work in IE

[Judas1012]

I've created a little JavaScript that takes two fields and performs a simple calculation from those two fields, then displays the result in a third field. I'm using a Mac and the calculator works fine in Safari, but fails in Internet Explorer (both Mac and Windows versions). I can't seem to figure out why.

Here is the function itself. The ugly part of the code after the initial code is to format the data to look like a currency amount.

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function customPrice(form) {
var height = bannerorder.customHeight.value;
var length = bannerorder.customLength.value;
var cost = bannerorder.customCost.value;
var num = height * length * 2.65;

if (height == 2 && length == 4) {
alert("2 x 4 is a predefined size. Please select it from the menu to the left.");
bannerorder.customHeight.value = null;
bannerorder.customLength.value = null;
bannerorder.customCost.value = "$0.00";
bannerorder.size.focus();
break;
}

num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
bannerorder.customCost.value = (((sign)?'':'-') + '$' + num + '.' + cents);
}
// End -->
</script>

...and this is how I call it (the form's name is bannerorder):

<tr align="center" valign="middle">
<td><input name="customHeight" type="text" id="customHeight" size="5" maxlength="3" onChange="customPrice(this.bannerorder)"></td>
<td><input name="customLength" type="text" id="customLength" size="5" maxlength="3" onChange="customPrice(this.bannerorder)"></td>
</tr>
</table>
<p><br>
<input name="CalcCost" type = button id="CalcCost" onClick="customPrice(this.bannerorder)" value="Calculate Cost">

The code is set to calculate the cost every time the user changes the value (onChange) or when they click the button.

Can anyone help? The error message that Internet Explorer provides on a Windows machine is:

Line: 274, 275, 279 (all the lines that call the function)
Char: 1
Error: Object expected
Code: 0
URL: http://www.(my domain).com

[khp]

Mozilla's javascript console complains that, the 'break' in the 'if' is invalid.
Break is meant to break out of a loop or a switch.

I'am not sure what you intended, if you intended to break out of the function, you should use return instead. If you only intended the break to, to break out of the T'if' then it should just be removed, you don't break out of an 'if'.

There might be other problems, but since alot of you code is missing, it's hard to tell if any of the remaining error messages I get, is due to the code you left out, or if it's really an error.

[Judas1012]

Beautiful. Works perfectly now.

A quick question, if you don't mind. I come from an intermediate level Java background, and this is my first attempt at doing JavaScript (I know the two aren't related, it just happened that way), so I still don't know all the little differences there are. It seems pretty similar, though.

What would the correct way be to exit out of a Submit function if certain criteria aren't met? I plan on implementing a verification routine when the user clicks the Submit button for the form -- how do I display an alert and then cancel/exit out of the submit action? When I return false, it seems to work sometimes, and then others it doesn't.

Would it be something like this?:

function validate(form) {
var whatever;
if (certain condition isn't met) {
alert("Alert message here");
return false; <---not sure about this. It works sometimes, but other times the form will submit anyway
}
return true;
}

[khp]

Returning false should work, assuming that you have setup the caller to recognize the false return value.
The alternative to using return would be to throw an exception, which is a little more involved

http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/stmt.html#1052196

[Judas1012]

Ah, i got it working after some tinkering. I'm still working on passing variables to functions -- in this case, I have to pass a form "object", I guess, to the function. Using "this.myForm" instead of just "myForm" got it working.

That got me thinking about another question I had (go figure...). How do I manipulate the values of list objects in the form? Using "form.listObject.value = whatever" doesn't seem to work for me. It won't actually change the selection in the list -- is the .value operator only available to text fields? Which operator should I be using to select certain data from a list?

[khp]

Originally posted by Judas1012
How do I manipulate the values of list objects in the form? Using "form.listObject.value = whatever" doesn't seem to work for me. It won't actually change the selection in the list -- is the .value operator only available to text fields? Which operator should I be using to select certain data from a list?

By list objects I assume you mean select options.
I'am not exactly sure what the standards say here. To change the selected object I think you have to set the 'selected' attribute on the option you wish to select.

Setting form.select.value does seem to have the desired effect in mozilla, provided that there is an option with that value in the select. But I'am not sure if this will work in all browsers.

[Judas1012]

Ah, I see. Now, another problem: what to do about Netscape users? I mean, other than putting a disclaimer at the top of the screen that says "Netscape users will not be able to utilize JavaScript functions" or something like that... what's the Netscape equivalent of:

alert("Some alert text");

[khp]

Originally posted by Judas1012
what to do about Netscape users? I mean, other than putting a disclaimer at the top of the screen that says "Netscape users will not be able to utilize JavaScript functions"

Ehhh ?
Netscape defines the javascript language.

You will ofcourse have a problem with older versions of Netscape, but this problem applies to old versions of IE as well, but to a much larger degree.

Unfortunatly MS has built in various incompatibilities into their implementation of javascript, so if you only test it on IE, it might not work in any version of Netscape.

But to answer your question

Originally posted by Judas1012
what's the Netscape equivalent of:
alert("Some alert text");

It's
alert("Some alert text");

[Judas1012]

Hmmm... for some reason,
alert("Some alert text.");
does not work with Netscape on the systems I've tried. My script works perfectly in IE on both Macintosh and Windows platforms, and Safari on the Mac platform. Netscape/Mozilla-based browsers (Netscape, Mozilla, Camino, FireBird, etc.) don't work with it. The alert text is not shown, and the boolean checks on submission don't work (the form is submitted whether or not false is returned on a check).

I guess I've got some debugging to do... :(

[khp]

In Netscape/Mozilla select Tools->'javascript console', and reload your page, it should give you an errror message, explaining why it doesn't work.