Page 1 of 1

Hidden element will not display in IE

Posted: Fri May 18, 2012 1:38 pm
by rick.emmet
Hello everyone,
I have a function on one of my PHP pages that allows the user to see a hidden form (they have to click on a check box). The code works fine in FireFox and Chrome, but fails in IE 8 (the earliest version of IE I'll support). I'm testing this on a development system with XP Pro and it may be an XP problem – but since XP is still has 25% of the share, I have to make sure what ever function I use will work in that environment. Here's the code:

Code: Select all

function ShowHide() {
	var head1 = document.getElementById("head1");
	var showform = document.form1.head1.checked;
	head1.style.visibility=(showform) ? "visible" : "hidden";
}

		<!-- Farther down the page -->

<input type="checkbox" name="head1" unchecked onclick="ShowHide(); " />
Does anyone know a work around for this problem? Any help is very much appreciated!
Cheers,
Rick

Re: Hidden element will not display in IE

Posted: Fri May 18, 2012 3:31 pm
by califdon
I'm surprised it works in any browser. You are trying to address the element with document.getElementById(), but your html does not give that element an ID, only a Name. Try adding id="head1" to your input element.

Re: Hidden element will not display in IE

Posted: Mon May 21, 2012 2:54 pm
by rick.emmet
Hello everyone,
So sorry to be confusing - I left out an important aspect of the function. The check box with the code...

Code: Select all

<input type="checkbox" name="head1" unchecked onclick="ShowHide(); " />
...is not the form that is to be hidden or visible. That is another form lower on the page. The check box must remain visible at all times so the user can see and interact with it. The code for the form that the function acts on is as follows:

Code: Select all

<div class="formLayout">
<form method="post" action="biplane_view2.php" name="biplane3" ID="head1" style="visibility:hidden;" >
<input type="hidden" name="user_id" value="<?php echo $_SESSION['user_id'] ?>" />
<!-- REST OF THE FORM HERE -->
I tried other functions that use the "display" property instead of the visibility property and can't get them to work either. Any input will be much appreciated!
Cheers,
Rick

Re: Hidden element will not display in IE

Posted: Mon May 21, 2012 5:24 pm
by califdon
You have completely changed the logic since your initial post and I can't follow what you are trying to do. Where do you call the function now? And you have hard coded "head1" in the function, while it seems that you're really trying to unhide the form "biplane3". You also have a defective reference to the form as the last line in your function.

I think what you want to do is this:

Code: Select all

function ShowHide(which) {
    var state = which.style.visibility;
    state = which.style.visibility = "hidden" ? "visible" : "hidden";
}

  . . . . .

<div class="formLayout" style="visibility:hidden" onclick="ShowHide(this);">
<form method="post" action="biplane_view2.php" name="biplane3" >
  . . . . .
</form>
</div>
}
As far as I know, forms don't have a visibility attribute, so I would apply the visibility to the <div>, not the <form>. Actually, I'm not sure how this would work, anyway. If the form is hidden, how will the user know where to click??

Re: Hidden element will not display in IE

Posted: Tue May 22, 2012 11:05 pm
by tr0gd0rr
Yes. You can't click on something with visibility:hidden or display:none. Maybe you could put visibility:hidden on the form and show the form when the div is clicked.