By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,243 Members | 1,116 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,243 IT Pros & Developers. It's quick & easy.

Why does this not work in IE

P: n/a
I am new to javascript and would appreciate any help that is offered.
The following script does not work in IE (the value
(document.quote.qty1.value)is not
displayed in the "equiptotal" field).
Can anyone tell where I went wrong? The script works fine in
Mozilla/Firefox.

//The script
function recalc() {

document.quote.equiptotal.value = document.quote.qty1.value;

}

// The Page

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

<meta name="generator" content="DreamWeaver">

<link rel="stylesheet" type="text/css" href="/css/web-soft.css">

<title>Quotation</title>

<SCRIPT LANGUAGE="JavaScript" src="/javascript/quote.js">

</script>

</head>

<BODY><center>

<form action="" method="post" name="quote">

<div id="quote">

<div id="smallbar">WEB Soft Systems Inc.</div>

Quotation

<table class="quote" cellspacing="2" cellpadding="2">

<tr>

<th>Qty</th>

<th>Item Num</th>

<th>Supplier</th>

<th>Description</th>

<th>Cost</th>

<th>Hrs</th>

</tr>

<tr>

<td class="small"><input type="text" name="qty1" size="4"
onChange="recalc()" maxlength="4"></td>

<td class="medium"><input name="itemnum1" type="text" id="itemnum1"
size="15"></td>

<td class="medium"><input name="supplier1" type="text" id="supplier1"
size="20"></td>

<td class="large"><input name="description1" type="text" id="description1"
size="30"></td>

<td class="medium"><input type="text" name="unitcost1" size="7"></td>

<td class="small"><input type="text" name="labor1" size="4"
maxlength="4"></td>

</tr>

</table>

<br>

<table class="quote" cellspacing="2" cellpadding="0">

<tr>

<th>Company</th>

<th>Site</th>

<th>Contact</th>

<th></th>

</tr>

<tr>

<td class="medlarge">&nbsp;</td>

<td class="medlarge">&nbsp;</td>

<td class="medlarge">&nbsp;</td>

<td><input type="submit" name="select" value="Select"></td>

</tr>

</table>

<br>

<table class="quote" cellspacing="2" cellpadding="0">

<tr>

<td class="medium" align="right">Equip Cost</td>

<td class="medium" align="left"><input type="text" name="equipcost" readonly
size="10"></td>

<td class="medium" align="right">Equip Total</td>

<td class="medium" align="left"><input type="text" name="equiptotal"
readonly size="10"></td>

<td class="medium" align="right">Sub Total</td>

<td class="medium" align="left"><input type="text" name="subtotal" readonly
size="10"></td>

<td class="small" align="left"></td>

</tr>

<tr>

<td class="medium" align="right">Labour Hrs</td>

<td class="medium" align="left"><input type="text" name="totallabor"
size="10" readonly></td>

<td class="medium" align="right">Mark-Up</td>

<td class="medium" align="left"><input type="text" name="markup"
onChange="recalc()" size="3" maxlength="4">%</td>

<td class="medium" align="right">PST 8%</td>

<td class="medium" align="left"><input type="text" name="pst" size="10"
readonly></td>

<td class="small" align="left"><input type="checkbox" name="check1"
value="Value1"></td>

</tr>

<tr>

<td class="medium" align="right">Labour Rate</td>

<td class="medium" align="left"><input type="text" name="laborrate"
size="10" readonly></td>

<td class="medium" align="right">Gross Margin</td>

<td class="medium" align="left"><input type="text" name="grossmargin"
size="10"></td>

<td class="medium" align="right">GST 7%</td>

<td class="medium" align="left"><input type="text" name="gst" size="10"
readonly></td>

<td class="small" align="left"><input type="checkbox" name="check2"
value="Value2"></td>

</tr>

<tr>

<td class="medium" align="right">Total Labour</td>

<td class="medium" align="left"><input type="text" name="laborcost"
size="10" readonly></td>

<td class="medium" align="right">Gross Profit&nbsp;</td>

<td class="medium" align="left"><input type="text" name="grossprofit"
size="10"></td>

<td class="medium" align="right">Total</td>

<td class="medium" align="left"><input type="text" name="total" size="10"
maxlength="10" readonly></td>

<td class="small" align="left"><input type="checkbox" name="check3"
value="Value3"></td>

</tr>

</table><br>

</div>

<div id="footer">Copyright&copy;2004 R.M. Singh</div>

</form>

</body>

</center>

</html>
Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
rick wrote:
The following script does not work in IE function recalc() {


In IE, there's already a method named "recalc", it's a member of the
document object. Your problem has to do with the function's name
resolution (some kind of name conflict, you could say).

<URL:http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/recalc.asp>

When calling the "recalc" function from the event attribute in your form
control, the resolution of the method name follows a specific schema[1]:
first IE looks up on the form control object whether there is a property
named "recalc" (there's not), then it searches on the form object
(there's not), then it searches on the document object (there's one),
where it finds and calls the native "recalc" function - since your
"recalc" is defined on the window object (that is, "above" the document
object), it is never reached.

Hey, what about using another name for your function;-)
---
[1]the resolution is UA-dependent IIRC.
---

HTH
Yep.
Jul 23 '05 #2

P: n/a
rick wrote:
<snip>
function recalc() {

document.quote.equiptotal.value = document.quote.qty1.value;

} <snip> <td class="small"><input type="text" name="qty1" size="4"
onChange="recalc()" maxlength="4"></td>

<snip>

An unfortunate choice of function names. IE (from 5.5, as I recall) has
a - document.recalc - method, and its custom scope chain for event
handling attribute code generated functions included the - document -
object. So when the function built from - onChange="recalc()" - is
executed the unqualified identifier - recalc - is resolved as -
document.recalc -, which does not do what - window.recalc - would. You
can either change the name of the function, or fully qualify the
reference to it in the attribute string.

Richard.
Jul 23 '05 #3

P: n/a
rick wrote on 10 apr 2004 in comp.lang.javascript:
I am new to javascript and would appreciate any help that is offered.
The following script does not work in IE (the value
(document.quote.qty1.value)is not
displayed in the "equiptotal" field).
Can anyone tell where I went wrong? The script works fine in
Mozilla/Firefox.

//The script
function recalc() {

document.quote.equiptotal.value = document.quote.qty1.value;


recalc() seems to be a reserved name.

change it to myRecalc() and you will be all right.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 23 '05 #4

P: n/a
Thanks for the help, much appreaciated:-)

"rick" <rm*****@rogers.com> wrote in message
news:Ap*******************@news04.bloor.is.net.cab le.rogers.com...
I am new to javascript and would appreciate any help that is offered.
The following script does not work in IE (the value
(document.quote.qty1.value)is not
displayed in the "equiptotal" field).
Can anyone tell where I went wrong? The script works fine in
Mozilla/Firefox.

//The script
function recalc() {

document.quote.equiptotal.value = document.quote.qty1.value;

}

// The Page

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

<meta name="generator" content="DreamWeaver">

<link rel="stylesheet" type="text/css" href="/css/web-soft.css">

<title>Quotation</title>

<SCRIPT LANGUAGE="JavaScript" src="/javascript/quote.js">

</script>

</head>

<BODY><center>

<form action="" method="post" name="quote">

<div id="quote">

<div id="smallbar">WEB Soft Systems Inc.</div>

Quotation

<table class="quote" cellspacing="2" cellpadding="2">

<tr>

<th>Qty</th>

<th>Item Num</th>

<th>Supplier</th>

<th>Description</th>

<th>Cost</th>

<th>Hrs</th>

</tr>

<tr>

<td class="small"><input type="text" name="qty1" size="4"
onChange="recalc()" maxlength="4"></td>

<td class="medium"><input name="itemnum1" type="text" id="itemnum1"
size="15"></td>

<td class="medium"><input name="supplier1" type="text" id="supplier1"
size="20"></td>

<td class="large"><input name="description1" type="text" id="description1"
size="30"></td>

<td class="medium"><input type="text" name="unitcost1" size="7"></td>

<td class="small"><input type="text" name="labor1" size="4"
maxlength="4"></td>

</tr>

</table>

<br>

<table class="quote" cellspacing="2" cellpadding="0">

<tr>

<th>Company</th>

<th>Site</th>

<th>Contact</th>

<th></th>

</tr>

<tr>

<td class="medlarge">&nbsp;</td>

<td class="medlarge">&nbsp;</td>

<td class="medlarge">&nbsp;</td>

<td><input type="submit" name="select" value="Select"></td>

</tr>

</table>

<br>

<table class="quote" cellspacing="2" cellpadding="0">

<tr>

<td class="medium" align="right">Equip Cost</td>

<td class="medium" align="left"><input type="text" name="equipcost" readonly size="10"></td>

<td class="medium" align="right">Equip Total</td>

<td class="medium" align="left"><input type="text" name="equiptotal"
readonly size="10"></td>

<td class="medium" align="right">Sub Total</td>

<td class="medium" align="left"><input type="text" name="subtotal" readonly size="10"></td>

<td class="small" align="left"></td>

</tr>

<tr>

<td class="medium" align="right">Labour Hrs</td>

<td class="medium" align="left"><input type="text" name="totallabor"
size="10" readonly></td>

<td class="medium" align="right">Mark-Up</td>

<td class="medium" align="left"><input type="text" name="markup"
onChange="recalc()" size="3" maxlength="4">%</td>

<td class="medium" align="right">PST 8%</td>

<td class="medium" align="left"><input type="text" name="pst" size="10"
readonly></td>

<td class="small" align="left"><input type="checkbox" name="check1"
value="Value1"></td>

</tr>

<tr>

<td class="medium" align="right">Labour Rate</td>

<td class="medium" align="left"><input type="text" name="laborrate"
size="10" readonly></td>

<td class="medium" align="right">Gross Margin</td>

<td class="medium" align="left"><input type="text" name="grossmargin"
size="10"></td>

<td class="medium" align="right">GST 7%</td>

<td class="medium" align="left"><input type="text" name="gst" size="10"
readonly></td>

<td class="small" align="left"><input type="checkbox" name="check2"
value="Value2"></td>

</tr>

<tr>

<td class="medium" align="right">Total Labour</td>

<td class="medium" align="left"><input type="text" name="laborcost"
size="10" readonly></td>

<td class="medium" align="right">Gross Profit&nbsp;</td>

<td class="medium" align="left"><input type="text" name="grossprofit"
size="10"></td>

<td class="medium" align="right">Total</td>

<td class="medium" align="left"><input type="text" name="total" size="10"
maxlength="10" readonly></td>

<td class="small" align="left"><input type="checkbox" name="check3"
value="Value3"></td>

</tr>

</table><br>

</div>

<div id="footer">Copyright&copy;2004 R.M. Singh</div>

</form>

</body>

</center>

</html>

Jul 23 '05 #5

P: n/a
"Evertjan." <ex**************@interxnl.net> writes:
recalc() seems to be a reserved name.
Not reserved, just used. In IE there is a property of that name on the
document object. Inside an intrinsic event handler, that shadows the
global function defined by the original poster.
It's not that he can't call it "recalc". It's just that he can't
refer to it as just "recalc" inside an intrinsic event handler.
He can use "window.recalc()" instead.
change it to myRecalc() and you will be all right.


That could also work.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #6

P: n/a
Lasse Reichstein Nielsen wrote on 11 apr 2004 in comp.lang.javascript:
change it to myRecalc() and you will be all right.


That could also work.


[Not specially to you. Lasse, you know this]

My point is, that, if a function does not [seem to] get called, a
variable does not react as it should, rename it by adding a well known
prefix, so that you do not loose the original naming meaning.

recalc() becomes:
myRecalc() or:
tempRecalc()

An editor with a global [and case sensitive] replace will be very
helpfull.

=============

btw:
In debugging of cource, first save a copy of your work, then set
breakpoints:

function recalc() {
alert("recalc function called") // BREAKPOINT
document.quote.equiptotal.value = document.quote.qty1.value;
}

This, including the fact that no error is registered, will show you that
the function never gets called, but NOT because of a referring mistake,
like

onchange="nonexistingFunction()"

To be even more sure, temporarily breakpoint the onchange by:

onchange="alert('onchange fires');recalc();"

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.