469,912 Members | 1,712 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,912 developers. It's quick & easy.

hide/unhide data with variable numbers of fields

I'm using a javascript that hides and unhides text based on a button
click. It works great across static fields on a form. The problem I
have is that I'm trying to hide and unhide various fields that are
populated on the page by a database. In other words, sometimes there
are 4 fields, sometimes 6.

I've used various scripts for the hide/unhide function. This is one
I'm using now that I've copied from another source:

<script language = "Javascript">

var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;
function toggleT(_w,_h) {
if (isDOM)
{
if (_h=='s')
document.getElementById(_w).style.visibility='visi ble';
if (_h=='h') document.getElementById(_w).style.visibility='hidd en';
}
else if (isIE) {
if (_h=='s')
eval("document.all."+_w+".style.visibility='visibl e';");
if (_h=='h')
eval("document.all."+_w+".style.visibility='hidden ';");
}
else if(isNS4)
{
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}
}
</script>
So if in the button field I have onclick =toggleT('divt1','s');
toggleT('divt2','s'); then it will work for spans with id divt1 and
divt2.

If I place the <spantag in front of one of the dynamic fields, then
the same value id=divt shows for each field displayed, so it only works
with the first field with that id. I've tried widening the span beyond
the field so that the span won't be repeated, but it doesn't seem to
work. I'm not sure what the restrictions are regarding how wide a span
can be or what can be enclosed within it.

I'm obviously not a javascript expert, and perhaps the above script is
not the best one to use for my purposes. But I'm sure this issue must
arise a lot and I just don't know how to address it.

Thanks for your help.

Nov 17 '06 #1
3 2587
toodi4 wrote on 17 nov 2006 in comp.lang.javascript:
I'm using a javascript that hides and unhides text based on a button
click. It works great across static fields on a form. The problem I
have is that I'm trying to hide and unhide various fields that are
populated on the page by a database. In other words, sometimes there
are 4 fields, sometimes 6.

I've used various scripts for the hide/unhide function. This is one
I'm using now that I've copied from another source:

<script language = "Javascript">
<script type='text/javascript'>
>
var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;
This is ancient code!!!

document.getElementById() is nearly universal nowadays.
function toggleT(_w,_h) {
if (isDOM)
{
if (_h=='s')
document.getElementById(_w).style.visibility='visi ble';
if (_h=='h') document.getElementById(_w).style.visibility='hidd en';
}
else if (isIE) {
if (_h=='s')
eval("document.all."+_w+".style.visibility='visibl e';");
Do not use eval(), it is evil, dangerous, and not necessary
if (_h=='h')
eval("document.all."+_w+".style.visibility='hidden ';");
}
else if(isNS4)
{
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}
}
</script>
So if in the button field I have onclick =toggleT('divt1','s');
toggleT('divt2','s'); then it will work for spans with id divt1 and
divt2.
Why not change the <spantagName collection elements in a <div>
with css style?

====================================
<script type='text/javascript'>

function hideshow(x){
var spandiv = document.getElementById('spandiv')
var spanGroup = spandiv.getElementsByTagName('SPAN')
for(i=0;i<spanGroup.length;i++)
spanGroup[i].style.visibility=(x=='hide')?'hidden':'visible'
}

</script>

<div id='spandiv'>
<span>111111</span>
===
<span>222222</span>
===
<span>333333</span>
===
<span>444444</span>
===
<span>555555</span>
</div>
<br><br>
<button onclick='hideshow("hide")'>hide</button>
<button onclick='hideshow("show")'>show</button>
============================================

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Nov 17 '06 #2
Daz

Evertjan. wrote:
toodi4 wrote on 17 nov 2006 in comp.lang.javascript:
I'm using a javascript that hides and unhides text based on a button
click. It works great across static fields on a form. The problem I
have is that I'm trying to hide and unhide various fields that are
populated on the page by a database. In other words, sometimes there
are 4 fields, sometimes 6.

I've used various scripts for the hide/unhide function. This is one
I'm using now that I've copied from another source:

<script language = "Javascript">

<script type='text/javascript'>

var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;

This is ancient code!!!

document.getElementById() is nearly universal nowadays.
function toggleT(_w,_h) {
if (isDOM)
{
if (_h=='s')
document.getElementById(_w).style.visibility='visi ble';
if (_h=='h') document.getElementById(_w).style.visibility='hidd en';
}
else if (isIE) {
if (_h=='s')
eval("document.all."+_w+".style.visibility='visibl e';");

Do not use eval(), it is evil, dangerous, and not necessary
if (_h=='h')
eval("document.all."+_w+".style.visibility='hidden ';");
}
else if(isNS4)
{
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}
}
</script>
So if in the button field I have onclick =toggleT('divt1','s');
toggleT('divt2','s'); then it will work for spans with id divt1 and
divt2.

Why not change the <spantagName collection elements in a <div>
with css style?

====================================
<script type='text/javascript'>

function hideshow(x){
var spandiv = document.getElementById('spandiv')
var spanGroup = spandiv.getElementsByTagName('SPAN')
for(i=0;i<spanGroup.length;i++)
spanGroup[i].style.visibility=(x=='hide')?'hidden':'visible'
}

</script>

<div id='spandiv'>
<span>111111</span>
===
<span>222222</span>
===
<span>333333</span>
===
<span>444444</span>
===
<span>555555</span>
</div>
<br><br>
<button onclick='hideshow("hide")'>hide</button>
<button onclick='hideshow("show")'>show</button>
============================================

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
I think that what Evertjan may be hinting at, is that you may need to
create a class, that will create 'objects' on-the-fly containing a dive
element, which contains all of your span elements, and also the
appropriate link/button(s) to show and hide that particular div element.

Nov 18 '06 #3
Daz

Daz wrote:
I think that what Evertjan may be hinting at, is that you may need to
create a class, that will create 'objects' on-the-fly containing a dive
element, which contains all of your span elements, and also the
appropriate link/button(s) to show and hide that particular div element.
CORRECTION:
'dive' should be read as 'div'.

Nov 18 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by | last post: by
3 posts views Thread by =?Utf-8?B?aWxy?= | last post: by
6 posts views Thread by Ralph | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.