onchange not recognized by IE?!?

[otto]

I have a form that is used for uploading photos. I have a check box for
specifying that the photo being uploaded should appear on a specific
web page rather than just be stored in the database for future posting.
When this check box checked two text boxes should appear in the form
for adding a url. The problem is: internet explorer doesn't seem to be
recognizing the onchange event as I've called it. What am I doing
wrong? Here's the code:

function triggerpages(){
var checks = document.getElementsByTagName('INPUT');
for(var i=0;i<checks.length;i++){
if(/web\-page/.test(checks[i].name)){
checks[i].onchange = function(){showpages();};
}
}
}

function showpages(){
alert("HI");
var pages = document.getElementsByTagName('INPUT');
alert(pages.length);
for(var i=0;i<pages.length;i++){
if(/page[0-9]/.test(pages[i].name)){
if(pages[i].style.display == none){
pages[i].style.display = block;
}else{
pages[i].style.display = none;
}
}
}
}
and the HTML:

<table border="0" cellpadding="10" cellspacing="0" id="upload_form">
<form action="/admin/photos" method="post"
enctype="multipart/form-data">

<tr>
<td>
Image file
</td>
<td>
<input type="file" value="file1" name="file1"
accept="image/jpg,image/gif" />
</td>
</tr>

<tr>
<td valign="top">
Caption
</td>
<td >

<textarea name="caption" cols="60" rows="4"

Photo.</textarea>

</td>
</tr>

<tr>
<td valign="top">

Placement
</td>
<td>

<input type="checkbox" name="web-page" checked />
Displayed in web page?
<br>

<input type="checkbox" name="in-index" checked />
Displayed on story index (small thumbnail)?
<br>

<input type="checkbox" name="in-blurb" />
Display thumbnail in home page story description?
<br>

<input type="checkbox" name="in-news-index" />
Displayed as the headline graphic on the news index?
<br>

<input type="checkbox" name="in-home-rotate" />
Photo rotation on home page?
<br>
</td>
</tr>
<tr class="page_entry">
<td>URL</td>

<td><input type="text" name="page1" value="" /></td>
</tr>
<tr class="page_entry">
<td>URL</td>
<td><input type="text" name="page2" value="" /></td>
</tr>
<tr>
<td align="center" colspan="2">

<input type="submit" value="Upload" name="submit" />
</td>
</tr>

</form>
</table>
<script language="javascript">
<!--
triggerpages();
//-->
</script>

[Martin Honnen]

otto wrote:

var checks = document.getElementsByTagName('INPUT');
for(var i=0;i<checks.length;i++){
if(/web\-page/.test(checks[i].name)){
checks[i].onchange = function(){showpages();}; <input type="checkbox" name="web-page" checked />
Displayed in web page?

IE's documentation is here
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/events/onchange.asp>
If you want an event handler on a checkbox that is triggered when the
checkbox is checked or unchecked then use onclick.
--

Martin Honnen
http://JavaScript.FAQTs.com/

[otto]

Thanks for your reply. That does seem to do the trick. I've been trying
to steer clear of onclick for accessibility reasons, but I guess I'll
get around that by using an onkeypress event too.

Thanks again.