Show/Hide form field in IE & Firefox

[Paul Lautman]

Hi y'all,
I found the toggle function (shown below) and applied it to a form of mine.
It works fine in IE, but in Firefox it appears to fail on the eval lines.

I've searched around but I can't seem to find the correct invocation to get
the field to appear in Firefox.

I've copied below the call and the html of the field itself.

Can anyone point me to what is wrong with it and more to the point, how to
get it working?

TIA
Regards
Paul

toggleT('divt1','s');

function toggleT(_w,_h) {
if (document.all) { // is IE
if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");
if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';");
} else { // is NS?
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}

<span id="divt1" style="visibility:hidden;position:relative;top:0;left:0">
<label for="other">Please specify where you heard about us:</label>
<input type="text" size="40" name="other" id="other">
</span>

 

[bobzimuta]

I believe layers are deprecated, or not supported in firefox. You can
use the css method you're using for the IE section (i.e.
style.visibility = 'visible' ). You may even be able to consolidate
both methods (IE and Firefox) into one, which would make for cleaner
code

 

[Evertjan.]

Paul Lautman wrote on 02 mrt 2006 in comp.lang.javascript:

toggleT('divt1','s');

function toggleT(_w,_h) {
if (document.all) { // is IE

IE and FF support support GetElementById and css !!
[and most NS too, but are there any out there?]

if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");

De not use eval() it is evil and not necessary

document.all[_w].style.visibility='visible';

will do nicely.

if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';");
} else { // is NS?
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}

try:

function toggleT(_w,_h) {
var xw = document.getElementById(_w)
if (_h == 's')
xw.style.visibility = 'visible';
else
xw.style.visibility = 'hidden';
}

or even shorter:

function toggleT(_w,_h) {
document.getElementById(_w).style.visibility =
(_h == 's') ? 'visible' : 'hidden';
}

not tested

 

[Paul Lautman]

try:

function toggleT(_w,_h) {
var xw = document.getElementById(_w)
if (_h == 's')
xw.style.visibility = 'visible';
else
xw.style.visibility = 'hidden';
}

or even shorter:

function toggleT(_w,_h) {
document.getElementById(_w).style.visibility =
(_h == 's') ? 'visible' : 'hidden';
}

not tested

Thanks for the prompt reply.
I did some more poking around and ended up changing from visibility too
display thus:

document.getElementById(_w).style.display = 'block';
document.getElementById(_w).style.display = 'none';

Since these both seem to accomplish the same thing, I wonder what the
difference is between the display and the visible properties and is one of
them better than the other for this application?

Any ideas?

TIA
Paul

 

[Lasse Reichstein Nielsen]

I found the toggle function (shown below) and applied it to a form of mine.
It works fine in IE, but in Firefox it appears to fail on the eval lines.

As it should. This script is so old it belives there are only two browsers
out there, IE and Netscape 4. It's a small wonder that the IE branch still
works.

It's also horribly written, even by the standard of its time, using
eval where it is absolutely not necessary.

My suggestion is to scrap it and start fresh.

toggleT('divt1','s');

function toggleT(_w,_h) {
if (document.all) { // is IE
if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");
if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';");
} else { // is NS?
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}

Ick. Why use "s" or "h" instead of true and false. But that's the least
of this hackery's problems.

My suggestion:

toggleT('divT', true);

function toggleT(elemId, visible) {
document.getElementById(elemId).style.visibility =
visible?"visible":"hidden";
}

It's not as backwards compatible as possible, failing in IE 4 and
Netscape 4. If these are really important, you can use:

function toggleT(elemId, visible) {
var elem;
if (document.getElementById) {
elem = document.getElementById(elemId);
} else if (document.all) {
elem = document.all[elemId];
} else if (document.layers) {
elem = document.layers[elemId];
} else {
return; // give up!
}
(elem.style || elem).visibility = visible ? "visible" : "hidden";
}

Not tested

Good luck.
/L

 

[Randy Webb]

Paul Lautman said the following on 3/2/2006 3:21 PM:

Thanks for the prompt reply.
I did some more poking around and ended up changing from visibility too
display thus:

document.getElementById(_w).style.display = 'block';
document.getElementById(_w).style.display = 'none';
Since these both seem to accomplish the same thing, I wonder what the
difference is between the display and the visible properties and is one of
them better than the other for this application?

visibility will just hide the element. the display property will remove
it from the flow of the page entirely.

Put this in a test page and view it:


<div>some text</div>
<div style="display:none">Some other text</div>
<div>This text will align right below the some text div</div>


<div>some text</div>
<div style="visibility:hidden">Some other text</div>
<div>This text will not align right below the some text div</div>

The only difference in the two is one uses visibility, the other uses
display

 

[Randy Webb]

Evertjan. said the following on 3/2/2006 3:13 PM:

Paul Lautman wrote on 02 mrt 2006 in comp.lang.javascript:

toggleT('divt1','s');

function toggleT(_w,_h) {
if (document.all) { // is IE

IE and FF support support GetElementById and css !!
[and most NS too, but are there any out there?]

IE and FF support getElementById but they only support GetElementById if
you define them yourself <g>

 

[Paul Lautman]

visibility will just hide the element. the display property will
remove it from the flow of the page entirely.

Put this in a test page and view it:


<div>some text</div>
<div style="display:none">Some other text</div>
<div>This text will align right below the some text div</div>


<div>some text</div>
<div style="visibility:hidden">Some other text</div>
<div>This text will not align right below the some text div</div>

The only difference in the two is one uses visibility, the other uses
display

Ahh yes, I missed that when viewing the page. That is what I wanted to
happen in the first place. Serendipity!

Thanks everyone for such speedy assistance.