Checkbox to make dropdown visible and hidden

JesseDidThis · 01-06-2004, 08:38 PM

Okay, I thought I had this figured out, but I was wrong. If you click anywere on the window, it makes the dropdown visible and then it won't switch back to hidden. The idea is to make it so that when the checkbox is checked, the dropdown is visible, when it isn't checked, the dropdown is hidden. Here is my code.

Quote:

Thank you so much for any help you are able to give me.

Roy Sinclair · 01-06-2004, 08:58 PM

There is no such thing as "unchecked".

if (document.addshow.morelocations.unchecked)

should be

if (document.addshow.morelocations.checked == false)

Your script also only works for users of IE, I hope you aren't planning on using it on the internet where anyone not using IE as their browser will need to use it.

Changing your references to the form fields will fix the cross browser problems.

document.addshow should be document.forms.addshow

JesseDidThis · 01-06-2004, 09:15 PM

I'm still getting the same problems...

you can click anywere on the page and it will display the dropdown menu, regardless if the checkbox is checked or not. Here is the URL to the form...

http://utahska.com/main/add_show.php

Here is what the code looks like now....

Quote:

Thank you so much for the cross browser help. I'm new to javascript and I hardly know a thing. I just really need this to work. Thank you.

Roy Sinclair · 01-06-2004, 10:03 PM

The code you posted works fine when I paste it into a sample page. The web site you linked doesn't work but when I create a local copy of it the code works there!

Of course your web site works properly when the browser is Mozilla, only IE is choking on it.

Edit: I changed a function in the calendar script and now it works in IE as well:

Code:

	function showElement(elmID) {
		if(ie) {
			for(i = 0; i < document.all.tags( elmID ).length; i++) {
				obj = document.all.tags(elmID)[i];
				if(!obj || !obj.offsetParent) continue;
				obj.style.visibility = 'visible';
			}
		}
	}

JesseDidThis · 01-06-2004, 10:31 PM

Well, thank you, at least I know that I didn't do it complete wrong...

How can I make it work for IE? 90% of my users are using IE.

JesseDidThis · 01-06-2004, 10:41 PM

Quote:

Originally posted by Roy Sinclair
The code you posted works fine when I paste it into a sample page. The web site you linked doesn't work but when I create a local copy of it the code works there!

Of course your web site works properly when the browser is Mozilla, only IE is choking on it.

Edit: I changed a function in the calendar script and now it works in IE as well:

Code:

function showElement(elmID) { if(ie) { for(i = 0; i < document.all.tags( elmID ).length; i++) { obj = document.all.tags(elmID)[i]; if(!obj || !obj.offsetParent) continue; obj.style.visibility = '[colr=red]visible[/color]'; } } }

Were does that code go again?

Roy Sinclair · 01-07-2004, 02:17 PM

The code I posted is part of the .js file where you bring in the javascript code for the calendar. The bit in red (now corrected in the original post) is all that was changed in the function, the original function there set the visibility style to an empty string instead of to "visible" so all that's changed is that the word "visible" is added.

Once that change is made IE will also work.

JesseDidThis · 01-07-2004, 09:41 PM

Thank you so much for that. I'm still stuck on the checkbox switch. I tested it in Mozilla, but it still doesn't work. I'm am so stuck on this. I really need this thing to work in Internet Explorer.

Here is the code agian...

Quote:

I messed around with it for a while and I may have figured out the problem....

I removed the...

Quote:

document.forms.addshow.Location2.style.visibility = 'visible';

and the...

Quote:

document.forms.addshow.Location2.style.visibility = 'hidden';

after the IF statements...

I changed them to alerts so that it would alert me if it was checked or not checked and they worked just great...

I left in the....

Quote:

style="visibility:hidden">

On the dropdown box....

When you clicked anywere on the window, the box became visible and stayed that way. The checkbox with the alerts worked great.

I then put the original lines to swith the drop down to visible and hidden back in the javascript up top. and left the style code in the dropdown box out. Nothing happend when I clicked the checkbox.

I put the style part back in the dropdown and changed the tag to visible instead of hidden and the check box still didn't do anything.

I don't know if this helps at all because if just confused me even more.

Thank you so much for your help, seriously.

P.S. - This was all tested in Internet Explorer 6.0

Roy Sinclair · 01-07-2004, 09:59 PM

The bug is in the CALENDAR.JS file, the other code is perfectly fine, you're just wasting your time examining that code for problems.

I was incorrect about adding the "visible" to the code, on the copy of your page I was working with I had also disabled the calendar.js file and hadn't reenabled it.

Specifically I see that the calendar.js file is hooking several events and causing the all SELECT fields (including the one you're trying to hide) to be redisplayed. One of the events which causes that redisplay happens to coincide with the clearing of the checkbox, your code correctly hides the select but then the calendar code gets called which then goes in and sets the form field visible again.

My advice? Replace the calendar code with a better one (see http://www.codingforums.com/showthre...threadid=27121).

JesseDidThis · 01-07-2004, 10:26 PM

Quote:

Originally posted by Roy Sinclair
The bug is in the CALENDAR.JS file, the other code is perfectly fine, you're just wasting your time examining that code for problems.

I was incorrect about adding the "visible" to the code, on the copy of your page I was working with I had also disabled the calendar.js file and hadn't reenabled it.

Specifically I see that the calendar.js file is hooking several events and causing the all SELECT fields (including the one you're trying to hide) to be redisplayed. One of the events which causes that redisplay happens to coincide with the clearing of the checkbox, your code correctly hides the select but then the calendar code gets called which then goes in and sets the form field visible again.

My advice? Replace the calendar code with a better one (see http://www.codingforums.com/showthre...threadid=27121).

I am so sorry that I did not understand what you were saying. Thank you for all of the help! You are a life saver.

deadmanwalking · 08-09-2005, 01:45 PM

after searching around for a way to do this i came accross this thread the problem is i want to do it with two different drop down menu's displaying only one of them at a time

this is the code i tried but it doesn't work can anyone offer any suggestions?

<script language="javascript">
function inspectbox() {
if (document.forms.form.more.value == 'right') {
document.forms.form.a.style.visibility = 'visible';
document.forms.form.b.style.visibility = 'hidden';
}
if (document.forms.form.more.value == 'left') {
document.forms.form.a.style.visibility = 'hidden';
document.forms.form.b.style.visibility = 'visible';
}
}
</script>

<form name='form'>
<input name="more" type="radio" value="right" onClick="inspectbox()" >Right Panel
<select name="a" style1 style="visibility:hidden">
<option>Option 1option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<input name="more" type="radio" value="left" onClick="inspectbox()" >Left Panel
<select name="b" style1 style="visibility:hidden">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</form>