Page 1 of 1

Javascript: Hiding / Showing - Objects/Elements

Posted: Thu Mar 18, 2004 10:10 am
by randomblink
Alrighty then...

I have an index.php that generates a set of forms.
I want to setup javascript to hide / show on demand.
Instead of scrolling through all the forms, I want to have a section of buttons that you press to VIEW a specific form.

So, I have the following setup...

in my page...

Code: Select all

<body OnLoad="hide( getElementById( 'AddEmpire' ) )">

<form id="AddEmpire"><insert form stuff here></form>
<form id="blah...
etc, etc...
Then in my js file I have...

Code: Select all

function hide(obj)
&#123;
   var theObj = getObject(obj);
   if (theObj)
   &#123;
      theObj.visibility = "hidden";
   &#125;
&#125;
Of course I also tried...

Code: Select all

<body OnLoad="HideAllForms()">
javascript.js

Code: Select all

function HideAllForms()
&#123;
    for ( var i=0; i=document.forms.length ; i++ )
    &#123;
         document.Form(i).style.visibility = "hidden";
    &#125;
&#125;
But that didn't work... So I tried...

Code: Select all

function HideAllForms()
&#123;
    var var_AllForms = document.getElementByTagName('form');
    for ( var i=0; i=document.forms.length ; i++ )
    &#123;
        var_AllForms&#1111;i].style.visibility = "hidden";
    &#125;
&#125;
and THAT didn't work...

What I want to do is have a HIDE ALL FORMS function to drop them all hidden... THEN I want to setup the buttons to SHOW those same forms...

I am having the devils own time trying to access them...
I keep getting not valid object errors...
all sorts of stuff...
it really blows...

Help if you can... Thanks in advance...

Posted: Thu Mar 18, 2004 10:17 am
by CoderGoblin
Try setting the style display:none as in the following javascript function

Code: Select all

function toggleNode(elemID) 
&#123;
  if(document.getElementById) &#123;
    var elem=document.getElementById(elemID);
    if (elem.style.display=='none') &#123;
      elem.style.display='block';
    &#125; else &#123;
      elem.style.display='none';
    &#125;
  &#125; else &#123;
    alert('Please upgrade your browser !!);
  &#125;
&#125;
Regards

Posted: Thu Mar 18, 2004 10:53 am
by randomblink
My problem is I can't seem to even access the elements?
I am fairly certain I could make them invis IF I could access the elements. But I need to access ALL FORMS and dig through them to make them invis...

Posted: Thu Mar 18, 2004 11:10 am
by CoderGoblin
Not sure if you can set form visibility after all the form tag is invisible anyway.
Try wrapping the <form> with <div> and hiding the <div>.

Using the function I showed earlier with

Code: Select all

<div id="a" style="display:none;"><form></form></div>
<div id="b" style="display:none;"><form></form></div>

<a href="javascript:toggleNode('a');">Toggle Form1</a>
<a href="javascript:toggleNode('b');">Toggle Form2</a>
I know this approach works as I have often used it. You can expand this with another function to get all <divs> and setting the styles all to none, or to block.

Regards