IE doesn't show/hide

[wendyp]

Hi - I'm fairly new to Javascript and this is working great in FF, but not in IE.

http://www.idleinc.com/dev/testform.php

If someone picks an airport, the address box is supposed to go away and the boxes for flight info are supposed to appear.

I've tried several different things, but here's the latest and it still doesn't work in IE. Setting the style directly didn't work either.

function show(field_id, on_off)
{
  if (on_off == 1) {
    document.getElementById(field_id).class='show';
    document.getElementById(field_id).className ='show';
  } else {
    document.getElementById(field_id).class='hidden';
    document.getElementById(field_id).className='hidden';
  }
}

Here are the styles for hidden and show:

.hidden {
  display: none;
  width: 100%;
}
.show {
  display: block;
  width: 100%;
}

Here's how I'm calling the function:

<select class=mainForm name=field_1 id=field_1 onchange="displaypickup(this);">

And here's the function:

function displaypickup(pickup)
{
if ((pickup[pickup.selectedIndex].value == 'Phoenix Sky Harbor International Airport' || pickup[pickup.selectedIndex].value == 'Scottsdale Airport'))
  {
    show('airport_pickup', 1);
    show('pickup_address', 0);
    show('gate_code1', 0);
  } else {
    show('airport_pickup', 0);
    show('pickup_address', 1);
  }
}

Would anyone have any idea why the display: none doesn't work in IE?

/Wendy

 

[tsuji]

[tt]function show(field_id, on_off)
{
if (on_off == 1) {
[red]//[/red]document.getElementById(field_id).class='show';
document.getElementById(field_id).className ='show';
} else {
[red]//[/red]document.getElementById(field_id).class='hidden';
document.getElementById(field_id).className='hidden';
}
}
[/tt]