javascript onChange event does not work in IE

**Lasse Reichstein Nielsen** · Jul 23 '05, 10:39 AM

Re: javascript onChange event does not work in IE

"rick" <rmsingh@no_spa m_rogers.com> writes:
[color=blue]
> The following basic script works fine in firefox by not in IE. Can anyone
> spot the problem?[/color]

A guess:
[color=blue]
> function addRowToTable() {
> var tbl = document.getEle mentById('iteml ist');
> var lastRow = tbl.rows.length ;
> var row = tbl.insertRow(l astRow);
>
> // qty cell
> var qty2 = row.insertCell( 0);
> var el_qty = document.create Element('input' );
> el_qty.setAttri bute('type', 'text');[/color]

IE doesn't translate values set with setAttribute to operative values.
To make it work in IE, you should write
el_qty.type = "text";
It should also work for modern browsers, as long as the property is
part of the W3C DOM 2 HTML specification.

My guess at what goes wrong is that ...
[color=blue]
> D.setAttribute( 'onClick','remo veRowFromTable( this)');[/color]

... it will definitly not recognize this one. Use this instead:
---
D.onclick = function(){remo veRowFromTable( this);};
---
[color=blue]
> function getRowIndex (cell) {
> return document.all ? cell.parentElem ent.rowIndex :
> cell.parentNode .rowIndex;[/color]

You are using the existence of document.all to decide whether to use
cell.parentElem ent or cell.parentNode . What about non-IE browsers that
has document.all but not cell.perentElem ent (I don't know if there are
any, but I don't know that there isn't either).

Just test for the property you need, with a fallback if it isn't there:
---
function getRowIndex(cel l) {
return (cell.parentNod e || cell.parentElem ent).rowIndex;
}
---

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**rick** · Jul 23 '05, 10:39 AM

Re: javascript onChange event does not work in IE

"Lasse Reichstein Nielsen" <lrn@hotpop.com > wrote in message
news:oep6lcug.f sf@hotpop.com.. .[color=blue]
> IE doesn't translate values set with setAttribute to operative values.
> To make it work in IE, you should write
> el_qty.type = "text";
> It should also work for modern browsers, as long as the property is
> part of the W3C DOM 2 HTML specification.[/color]
I tried it but it does not work....but no error is generated.
Your suggested code does not display when I hit the 'TableHTML' button
so I think the properties is not being assigned.[color=blue]
>
> My guess at what goes wrong is that ...
>[color=green]
> > D.setAttribute( 'onClick','remo veRowFromTable( this)');[/color]
>
> .. it will definitly not recognize this one. Use this instead:
> ---
> D.onclick = function(){remo veRowFromTable( this);};[/color]
This does not work either same reason I think? below is the
modified sample that tried.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator " content="PSPad editor, www.pspad.com">
<title>testin g tables</title>
<script type="text/javascript">

</script>
</head>
<body>
<form name="myform" method="post" action="myform. php">
<table id="itemlist" border="1">
<tr><th>Qty</th><th>Cost</th><th>-</th></tr>
<tr>
<td>
<input type="text" name="qty" size="7" maxlength="7"
onChange="calc_ total()">
</td>
<td>
<input type="text" name="cost" size="7" maxlength="7"
onChange="calc_ total()">
</td>
<td onClick="remove RowFromTable(th is)">-</td>
</tr>
</table>
<hr>
<table id="totalcost" border="1">
<tr>
<td>
<input type="text" size="7" name="test" readonly>
</td>
<td>
<input type="text" size="7" name="total" readonly>
</td>
</tr>
</table>
<input type="button" value="TableHTM L" onclick="showta bleinnerhtml()" >
<input type="button" value="Add" onclick="addRow ToTable();">
</form>
</body>
</html>

**Richard Cornford** · Jul 23 '05, 10:40 AM

Re: javascript onChange event does not work in IE

rick wrote:[color=blue]
> "Lasse Reichstein Nielsen" wrote:[/color]
<snip>[color=blue][color=green]
>> D.onclick = function(){remo veRowFromTable( this);};[/color][/color]
[color=blue]
> This does not work either same reason I think? below is the
> modified sample that tried.[/color]
<snip>[color=blue]
> el_qty.onChange = function(){calc _total();};[/color]
<snip>

The attribute names for intrinsic events are case insensitive in HTML
but the corresponding DOM object property names are traditionally (and
mostly implemented as) all lower case. The above assignment would be
expected to create an - onChange - property and assign a reference to
the function to that property, but the function will not be called in
response to change events.

Richard.

DU · Jul 23 '05, 10:48 AM

Re: javascript onChange event does not work in IE

rick wrote:[color=blue]
> "Lasse Reichstein Nielsen" <lrn@hotpop.com > wrote in message
> news:oep6lcug.f sf@hotpop.com.. .
>[color=green]
>>IE doesn't translate values set with setAttribute to operative values.
>>To make it work in IE, you should write
>> el_qty.type = "text";
>>It should also work for modern browsers, as long as the property is
>>part of the W3C DOM 2 HTML specification.[/color]
>
> I tried it but it does not work....but no error is generated.
> Your suggested code does not display when I hit the 'TableHTML' button
> so I think the properties is not being assigned.
>[color=green]
>>My guess at what goes wrong is that ...
>>
>>[color=darkred]
>>>D.setAttribu te('onClick','r emoveRowFromTab le(this)');[/color]
>>
>>.. it will definitly not recognize this one. Use this instead:
>>---
>> D.onclick = function(){remo veRowFromTable( this);};[/color]
>
> This does not work either same reason I think? below is the
> modified sample that tried.
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <html>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=windows-1250">
> <meta name="generator " content="PSPad editor, www.pspad.com">
> <title>testin g tables</title>
> <script type="text/javascript">
> <!-- Begin Add Row to Itemlist Table
> function addRowToTable() {
> var tbl = document.getEle mentById('iteml ist');
> var lastRow = tbl.rows.length ;
> var row = tbl.insertRow(l astRow);[/color]

I recommend you use meaningful, self-explanatory variable identifiers
which are distinct from usual names found in HTML for code
maintainability +reviewing purposes.

MSIE 6 has problems with insertRow (at least in a loop) but has no
problem with
var objTRow = tbl.createEleme nt("tr");

otherwise, I would drop var lastRow = tbl.rows.length ; and use

var objTRow = objTable.insert Row(-1);

"If index is -1 or equal to the number of rows, the new row is appended."

Document Object Model HTML

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903

[color=blue]
>
> // qty cell
> var qty2 = row.insertCell( 0);[/color]

You may have to use

var qty2 = document.create Element("td");

instead. Again, using insertCell with MSIE 6 should not cause problems
(except maybe when you're dynamically creating and inserting in a loop).
[color=blue]
> var el_qty = document.create Element('input' );
> el_qty.type = "text";
> el_qty.setAttri bute('name', 'qty');[/color]

Just like Lasse told you, best is to always avoid the setAttribute
method when there is a better, more reliable and more efficient way to
assign an attribute a value. Peter-Paul Koch recommends the same thing too.

Document Object Model HTML

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498

[color=blue]
> el_qty.setAttri bute('size', '7');[/color]

e._qty.size = 7;

Document Object Model HTML

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-79659438

[color=blue]
> el_qty.setAttri bute('maxlength ', '7');[/color]

e._qty.maxLengt h = 7;

Document Object Model HTML

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-54719353

[color=blue]
> el_qty.onChange = function(){calc _total();};[/color]

el_qty.onchange = function(evt) {calc_total();} ;

[color=blue]
> qty2.appendChil d(el_qty);
>
> // price cell
> var price2 = row.insertCell( 1);[/color]

You may have to use

var price2 = document.create Element("td");

and then later append it to the table row object. That's how I proceeded
in a demo file because MSIE 6 was giving me problems. I did not have
problems with insertCell and insertRow with MSIE 6 as long as I did not
use these methods in a loop.

Dynamically creating, populating and inserting a table

IIS 7.5 Detailed Error - 404.0 - Not Found

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/CreatingTable.html

[color=blue]
> var el_price = document.create Element('input' );
> el_price.setAtt ribute('type', 'text');
> el_price.setAtt ribute('name', 'cost');
> el_price.setAtt ribute('size', '7');
> el_price.setAtt ribute('maxleng th', '7');
> el_price.setAtt ribute('onChang e', 'calc_total()') ;
> price2.appendCh ild(el_price);
>
> // remove me cell
> var D = row.insertCell( 2);
> //D.innerHTML='<a href="javascrip t:removeRowFrom Table(this)">-</a>'
> D.onClick = function(){remo veRowFromTable( this);};[/color]

Again, a better variable identifier can be chosen (instead of D) and
setting an event attribute value must be done differently as Lasse
explained.
[color=blue]
> var el_txt = document.create TextNode("-");
> D.appendChild(e l_txt);
> }
> //
> function getRowIndex (cell) {
> return (cell.parentEle ment || cell.parentNode ).rowIndex;[/color]

Here, it would help your code efficiency a bit if you code use
offsetParent (or just parentNode) instead. Or even just use

objTableCell.pa rentNode.rowInd ex

Document Object Model HTML

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67347567

[color=blue]
> }
>
> //Remove a row from the table
> function removeRowFromTa ble(cell){
> alert ("start function");
> var tbl = document.getEle mentById('iteml ist');
> var lastRow = tbl.rows.length ;
> //alert (lastRow);
> var rowToDelete = getRowIndex(cel l);[/color]

How about
var rowToDelete = cell.offsetPare nt;
and then drop the getRowIndex entirely. Also, if there are discrepancies
in the offsetParent, then there should not be for parentNode. The only
possible immediate parentNode for a table cell is a <tr> and parentNode
is supported by MSIE 5+. So,

rowToDelete = cell.parentNode ;

has to be working in MSIE 5+ and all other W3C DOM Core compliant browsers.

I'm sure there could be an even more powerful, efficient way to do this.

Something like

onclick="docume nt.getElementBy Id('itemlist'). deleteRow(this. parentNode.rowI ndex);"

(not tested but it should work).
If this single instruction works, then you replace with it some 6 lines,
2 functions, 1 function call and 3 local variables.

DU
[color=blue]
> //alert (rowToDelete);
> if (lastRow > 2) tbl.deleteRow(r owToDelete);
> }
>
> // Calculate the total
> function calc_total() {
> //Do Nothing yet
> }
> function showtableinnerh tml(){
> alert(document. getElementById( 'itemlist').inn erHTML);
> }
> //-->
> </script>
> </head>
> <body>
> <form name="myform" method="post" action="myform. php">
> <table id="itemlist" border="1">
> <tr><th>Qty</th><th>Cost</th><th>-</th></tr>
> <tr>
> <td>
> <input type="text" name="qty" size="7" maxlength="7"
> onChange="calc_ total()">
> </td>
> <td>
> <input type="text" name="cost" size="7" maxlength="7"
> onChange="calc_ total()">
> </td>
> <td onClick="remove RowFromTable(th is)">-</td>
> </tr>
> </table>
> <hr>
> <table id="totalcost" border="1">
> <tr>
> <td>
> <input type="text" size="7" name="test" readonly>
> </td>
> <td>
> <input type="text" size="7" name="total" readonly>
> </td>
> </tr>
> </table>
> <input type="button" value="TableHTM L" onclick="showta bleinnerhtml()" >
> <input type="button" value="Add" onclick="addRow ToTable();">
> </form>
> </body>
> </html>
>
>[/color]

javascript onChange event does not work in IE

javascript onChange event does not work in IE

Comment

Comment

Comment

Comment