Hidden element will not display in IE

[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:

 

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

[smoseley]

Couple things... pass the input by ref to the function, and try display: none instead of visibility: hidden (will push other elements up on the page as well as making it disappear, whereas visibility keeps an invisible block where the form used to be)

function ShowHide(control) {
var head1 = document.getElementById("head1");
head1.style.display = control.checked ? "block" : "none";
}

	<!-- Farther down the page -->

<input type="checkbox" name="head1" onclick="ShowHide(this); " />

[Adam]

As mentioned, you should use the CSS display property instead of visibility, but I'm guessing the source of your problem is in the JS. What errors do you get?

[nogray]

First you are using getElementById('head1') and your input doesn't have an id property. If you have a div with the id "head1", it might cause a conflict because IE uses the names for input fields as variables. You might want to rename it to "head1_div" or something like that.

 

You are trying to show, hide the input checkbox (head1) instead of the form and since it's undefined, you'll get an error.

[smoseley]

If you have a div with the id "head1", it might cause a conflict because IE uses the names for input fields as variables.

 

Sounds like the root of the problem right threre.

[Adam]

Don't know how I missed the missing ID before

 

If you have a div with the id "head1", it might cause a conflict because IE uses the names for input fields as variables.

 

Sounds like the root of the problem right threre.

 

That won't cause a problem given he's declaring the variable within the function scope.

[rick.emmet]

Hi Everyone,

Thanks for all the responses! I just got back and will have to tinker with these suggestions - I'll let you know what the results are. BTW, I did not get any errors at all, which is really strange. And of course this works great in every other major browser. I'll post the results soon.

Thanks again,

Rick

[rick.emmet]

Hello again,

I went back and tried the function Smoseley suggested and noticed that I didn't even give you guys the total info on the function I'm attempting to use. I'm very sorry for the confusion! Below the checkbox that calls the function...

 

<input type="checkbox" name="head1" unchecked onclick="ShowHide(); " />

 

...is the actual form that I want to have hidden until the user clicks on the check box, that code is as follows:

 

<div class="formLayout">
<form method="post" action="biplane_view2.php" name="biplane3" ID="head1" style="visibility:hidden;" >
<input type="hidden" name="customer_id" value="<?php echo $_SESSION['customer_id'] ?>" />
<!-- REST OF THE FORM HERE -->

 

As you can see, I'm not using the div name within the function, I'm simply using name of the form itself. The check box that activates the visibility (or display) properties, must remain visible at all times and that is why it is located outside of the form that the function operates on.

 

I tried every variation of Smoseley's function and the best I could do was to get the boarder around the div to collapse and expand. This was true for all browsers. Using display instead of visibility makes sense, I can't get it to work at all though. Any input will be most appreciated!

Cheers,

Rick

[Adam]

XHTML is case-sensitive, and IE's probably quite strict about it. Change the attribute "ID" to lower-case.

[rick.emmet]

Hi Adam,

Thanks for noticing the caps "ID" - unfortunately the change to lowercase did not help. I'm a bit perplexed by the function's behavior. It works in FireFox and Chrome, but in IE8. In IE8 it's now turning on and off the checkbox itself. I attempted to change the names / id's of the various parts of the function, the checkbox and the form itself - but only way this works at all is to have the checkbox name=head1 and the form id=head1. FireFox and Chrome both act on the form and IE8 acts on the checkbox. I'll keep messing around with this.

Thanks again,

Rick

[Kays]

Why do you have two elements with the same ID?

 

The logic is simple. If JavaScript fails for you and you can't understand it, use jQuery.

 

JavaScript:

<script type="text/javascript">
function ShowHide ()
{
     var element = document.getElementById("head1");
     if (element.style.display == "" or element.style.display == "none")
         element.style.display = "block";
     else
         element.style.display = "none";
}
</script>

<!-- you know that unchecked is not a valid attribute right? -->
<input type="checkbox" onclick="ShowHide();" />

<div class="formLayout" id="head1" style="display: none;">
     <form method="post" action="biplane_view2.php" name="biplane3">
          <!-- form stuff  -->
     </form>
</div>

 

jQuery:

<script type="text/javascript" src="/js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function ShowHide ()
{
     jQuery("#head1").toggle();
}
</script>

<!-- you know that unchecked is not a valid attribute right? -->
<input type="checkbox" onclick="ShowHide();" />

<div class="formLayout" id="head1" style="display: none;">
     <form method="post" action="biplane_view2.php" name="biplane3">
          <!-- form stuff  -->
     </form>
</div>

 

P.S.: submitted by accident.

[rick.emmet]

Hi Kays,

Thanks for the reply. To answer your question, I do not have two elements on the page with "id=head1". I have a checkbox with "name=head1" and a form with "id=head1". When I first found this function on the web (with a demo) I thought that the naming convention was going to be a problem or at least confusing. But it was the only way I could get the function to work, so I went with it. And it does work in FireFox and Chrome - just not in IE8.

 

I tried both of your functions and neither of them will work, which seems very odd to me, they look fine. When you apply the "block" or "none" properties to the div, I loose the boarder of the div (which I am using simply to justify the layout) and when I click on the checkbox, nothing happens. I'll try a couple of more things and report back (hopefully with good news).

Thanks again,

Rick

[smoseley]

Just post the entire HTML output so someone can test it...

[Kays]

rick.emmet: yes you did. From what you showed us, you had 'head1' id on your checkbox element AND your form element.