onClick Event Failing in IE

kb posted this at 03:43 — 22nd April 2007.

Joined: Feb 2002

Hey everyone, I'm not 'new' here, just 'returning'. You can read about it here...

Anyways, I wrote this script that should (in theory) display some other elements when things are clicked and selected...but it doesn't seem to work in IE. It does in Firefox, and I haven't tested it in any others yet...I'd rather fix IE before tackling any other problems.

You can view a working example of this at http://payments.int-ind.com (select something in the 'drop down' and you should see some more elements)

Here's the code:
The onClick Call (designed to 'display' the div with the id value of the number sent to the function):

onClick="type(1)"

'
The JS Function (annoyingly explicit, rather than using variables all over, because I wanted to see if I could isolate the problem):

function type (type_val) {
    document.getElementById('sub').style.display = "block";
    document.getElementById('sub').style.visibility = "visible";
    
    document.getElementById(type_val).style.display = "block";
    document.getElementById(type_val).style.visibility = "visible";
    
    
    if (type_val == 1) {
        document.getElementById('h_i').focus();
    
        document.getElementById('2').style.display = "none";
        document.getElementById('2').style.visibility = "hidden";
        
        document.getElementById('3').style.display = "none";
        document.getElementById('3').style.visibility = "hidden";
        
        document.getElementById('9').style.display = "none";
        document.getElementById('9').style.visibility = "hidden";
    } else if (type_val == 2) {
        document.getElementById('s_i').focus();
    
        document.getElementById('1').style.display = "none";
        document.getElementById('1').style.visibility = "hidden";
        
        document.getElementById('3').style.display = "none";
        document.getElementById('3').style.visibility = "hidden";
        
        document.getElementById('9').style.display = "none";
        document.getElementById('9').style.visibility = "hidden";
    } else if (type_val == 3) {
        document.getElementById('prod').focus();
    
        document.getElementById('1').style.display = "none";
        document.getElementById('1').style.visibility = "hidden";
        
        document.getElementById('2').style.display = "none";
        document.getElementById('2').style.visibility = "hidden";
        
        document.getElementById('9').style.display = "none";
        document.getElementById('9').style.visibility = "hidden";
    } else if (type_val == 9) {
        document.getElementById('1').style.display = "none";
        document.getElementById('1').style.visibility = "hidden";
        
        document.getElementById('2').style.display = "none";
        document.getElementById('2').style.visibility = "hidden";
        
        document.getElementById('m_i').focus();
    }
}

'The initial numbered divs are set in the CSS to:

....style.display = 'none';
....style.visibility = 'hidden';

'Like I said, it works in FF, but not IE. Anybody have any ideas or suggestions? I'm at a loss.

I hope this is just me overlooking something...

Thanks

Abhishek Reddy posted this at 22:58 — 22nd April 2007.

He has: 3,348 posts

Joined: Jul 2001

Fails in Firefox and Konqueror too. Not sure why it works for you.

You shouldn't be using [incode]onclick[/incode] here anyway. Use [incode]onchange[/incode] for the [incode]select[/incode] tag. It has the added advantages of also working if the user uses a keyboard rather than the mouse, and not running the update code if they click but don't change the selection.

kb posted this at 05:03 — 23rd April 2007.

He has: 1,380 posts

Joined: Feb 2002

Oh. That's weird because it works for me in FF, like I said...

I'll try 'onChange'. I didn't know that existed.

I'll repost in a while.

Abhishek Reddy posted this at 21:08 — 23rd April 2007.

He has: 3,348 posts

Joined: Jul 2001

I'm using Iceweasel 2.0 -- almost exactly the same as Firefox 2.0 -- on GNU/Linux. Maybe that makes a difference.

kb posted this at 19:25 — 25th April 2007.

He has: 1,380 posts

Joined: Feb 2002

Ok, so I'm a little confused on how "onChange" works with 'select'... I got a few different examples when I searched for it.

What I've got, that seems to make sense is:

HTML

	<select name="type" id="type" onChange="type()">
		<option value="" id="blankLoad"></option>
		<option value="Hosting">Hosting</option>
		<option value="Services">Services</option>
		<option value="Products">Products</option>
	</select>

function type() {
	type_val = document.getElementById('type').value;
	
	if (type_val == 'Hosting') {
		type_id = 1;
	} else if (type_val == 'Services') {
		type_id = 2;
	} else if (type_val == 'Products') {
		type_id = 3;
	} else if (type_val == 'mSoL') {
		type_id = 9;
	}
	
	document.getElementById(type_id).style.display = "block";
	document.getElementById(type_id).style.visibility = "visible";

        ....
}

But that doesn't work. I tried different permutations and things, but I'm not even sure if I'm going in the right direction.

Any ideas?

Thanks again

Abhishek Reddy posted this at 21:04 — 25th April 2007.

He has: 3,348 posts

Joined: Jul 2001

You need to access the selected option like this:

type_select = document.getElementById('type');
type_val = type_select.options[type_select.selectedIndex].value;

kb posted this at 01:42 — 27th April 2007.

He has: 1,380 posts

Joined: Feb 2002

Apparently, I'm not getting email notifications like I should be.

Anyways, let me play around with that later tonight, and I'll get back to you.

Thanks