Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jan 2004
    Location
    Salt Lake City, Utah
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Checkbox to make dropdown visible and hidden

    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.

    <script language="javascript">
    function inspectbox() {
    if (document.addshow.morelocations.checked) {
    document.addshow.Location2.style.visibility = 'visible';
    }
    if (document.addshow.morelocations.unchecked) {
    document.addshow.Location2.style.visibility = 'hidden';
    }
    }
    </script>

    <form enctype='multipart/form-data' name='addshow'>
    <input name="morelocations" type="checkbox" onClick="inspectbox()">
    <select name="Location2" style="visibility:hidden">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    </select>
    </form>
    Thank you so much for any help you are able to give me.
    -----------------
    JesseDidThis Design
    www.JesseDidThis.com

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #3
    New to the CF scene
    Join Date
    Jan 2004
    Location
    Salt Lake City, Utah
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....

    <script language="javascript">
    function inspectbox() {
    if (document.forms.addshow.morelocations.checked) {
    document.forms.addshow.Location2.style.visibility = 'visible';
    }
    if (document.forms.addshow.morelocations.checked == false) {
    document.forms.addshow.Location2.style.visibility = 'hidden';
    }
    }
    </script>

    <form enctype='multipart/form-data' name='addshow'>
    <input name="morelocations" type="checkbox" onClick="inspectbox()">
    <select name="Location2" style="visibility:hidden">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    </select>
    </form>
    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.
    -----------------
    JesseDidThis Design
    www.JesseDidThis.com

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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';
    			}
    		}
    	}
    Last edited by Roy Sinclair; 01-07-2004 at 02:12 PM.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #5
    New to the CF scene
    Join Date
    Jan 2004
    Location
    Salt Lake City, Utah
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 Design
    www.JesseDidThis.com

  • #6
    New to the CF scene
    Join Date
    Jan 2004
    Location
    Salt Lake City, Utah
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    -----------------
    JesseDidThis Design
    www.JesseDidThis.com

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #8
    New to the CF scene
    Join Date
    Jan 2004
    Location
    Salt Lake City, Utah
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    <script language="javascript">
    function inspectbox() {
    if (document.forms.addshow.morelocations.checked) {
    document.forms.addshow.Location2.style.visibility = 'visible';
    }
    if (document.forms.addshow.morelocations.checked == false) {
    document.forms.addshow.Location2.style.visibility = 'hidden';
    }
    }
    </script>

    <form name='addshow'>
    <input name="morelocations" type="checkbox" onClick="inspectbox()">More...
    <select name="Location2" style1" style="visibility:hidden">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    </select>
    </form>
    I messed around with it for a while and I may have figured out the problem....

    I removed the...
    document.forms.addshow.Location2.style.visibility = 'visible';
    and the...
    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....
    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
    Last edited by JesseDidThis; 01-07-2004 at 09:43 PM.
    -----------------
    JesseDidThis Design
    www.JesseDidThis.com

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #10
    New to the CF scene
    Join Date
    Jan 2004
    Location
    Salt Lake City, Utah
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    -----------------
    JesseDidThis Design
    www.JesseDidThis.com

  • #11
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry

    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •