Hi, I would like to have a javascript function to show/hide form elements, like input boxes, textareas, etc. I have one but only works witj firefox. When I try to run it wit IE6, firts the script is blocked and after unblock it it doesn't work. How can I avoid the IE6 to block my script and put the script working? The script is the following, ignore the bad programming, is just to test: function showhide(what,obj) { if(what.checked) { obj1 = document.getElementById(obj); obj1.style.display = 'block'; } else { obj1 = document.getElementById(obj); obj1.style.display = 'none'; } } Code (markup):
Have you tried setting it's visibility to visible or hidden. function showhide(what,obj) { obj1 = document.getElementById(obj); if(what.checked) { obj1.style.visibility = 'visible'; } else { obj1.style.visibility = 'hidden'; } } Code (markup):
"When I try to run it wit IE6, firts the script is blocked and after unblock it it doesn't work. How can I avoid the IE6 to block my script and put the script working?" As of XP SP2, html files with scripts opened from your local machine zone are blocked by default. This is for your security so you should leave it on, and just enable scripting on a page-by-page basis. The javascript example you listed should work in Internet Explorer once you've allowed blocked content for that page. Here is your code in an example I tested, and it works in IE and Firefox. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript"> <!-- function showhide(what,obj) { if(what.checked) { obj1 = document.getElementById(obj); obj1.style.display = 'block'; } else { obj1 = document.getElementById(obj); obj1.style.display = 'none'; } } //--> </script> </head> <body> <form> <input type="checkbox" onclick="showhide(this, 'txt1');" checked="checked" /> <p> <input type="input" id="txt1" /> </p> </form> </body> </html> HTML:
Thanks to both of you for the response. Slapyo: I'd already tried using visibility attribute instead of display attribute. Doesn't worked too. Torunforever: My code is exacly equals to the one you've posted, despite some different name of variable Neither one worked in IE, but now I'm now that's becasuse IE is blocking the scripts. I've tried also a simple alert in the beginning of the function and the message wasn't showed :=) The problem is due the IE and not the script. It's my conclusion. Hope it's not blocked in the end user IE Thanks again, JP
jonhy.pear, if the problem was the script being blocked by IE then it should be a local issue only. End users loading your page should not have the same problem. Just to test it, upload your file(s) and load it up in a browser and see if anything is blocked or if it works.
I wanted to share what I did after reading this thread, in case it helps someone else. I needed a hidden text input that became visible only when "Other" was selected from the drop down. In testing, I gave the form field the obj id, but changed it to a div so that I could include a table with a bit of text as well. If I actually knew what I was doing, I'm sure I could clean this up a bit. ...<script type="text/javascript"> function hide(obj) { obj1 = document.getElementById(obj); obj1.style.visibility = 'hidden'; } function show(obj) { obj1 = document.getElementById(obj); obj1.style.visibility = 'visible'; } function show_other(optionValue) { if(optionValue=='Other'){show('txt1');}else{hide('txt1');} } </script> </head> <body onload=hide('txt1');> <form method=post action=whatever.php> <select id="how" size="1" name="how_hear" onchange="show_other(this.value)""> <option value="">Please Select</option> <option>Special Event</option> <option>Radio</option> <option>Newspaper</option> <option>Banners</option> <option>Posters</option> <option value='Other'>Other</option> </select> <div id="txt1"> <TABLE> <TR> <TD>Other: </TD><TD><input type="text"/></TD> </TR> </TABLE> </div> </form>... Code (markup):
In the time since I posted the above I have began to use obj1.style.display = 'none'; Code (markup): to hide and obj1.style.display = ''; Code (markup): to show. (that's the "display" property instead of the "visibility" property and setting the style to a null string takes it back to default.)
obj1.style.display = 'block'; //to display div or obj1.style.display = 'inline-block'; //to display inline div Code (markup):