Post by sergioHi all,
I have created the following script that will show/hide a menu based on
checkboxes. It works fine in Opera but not on IE6!
Does anybody knows a workaround this problem?
Thanks for your response.
Sergio
I'll provide some more information to the problem here. Maybe it will
help someone come up with a solution...
I am not sure why IE is delaying displaying the data. If you open
someother window untop of the IE window and you take the other window
away, IE will show the change. Showhow, IE isn't noticing the change
to the screen. Sometimes minimize will do the trick and sometimes not.
Openning up someother window above the IE window where it covered the
change always showed the change. Obviously, you need to open the
second windo after doing the change. IE displays source worked for
me.
I have seen this before on the Mac version. I kind of ignored it
because of the small market share of the Mac version of IE. I tried
using focus(), but that didn't help. I tried this on MacOS 10.2.6
with IE 5.2.
I included a second file below. I start with item being visible.
Clicking on email will make one line invisible. Clicking on print
makes all three input fiels visible. This works in IE 5.2 on MacOS
10.2.6.
There may be some discussion of this in this forum.
Robert
---------------------- IE delays displaying. ---------
<html>
<head>
<title>forms checking</title>
<style type="text/css">
.form-checkbox {color:black; }
.form-item {color:black; }
</style>
<script type="text/javascript">
function dodisplaytbyarray(thewhat) {
var thearrays = new Array();
thearrays = thewhat.split("|");
// Do not have a clue what "+thearrays+" is about
// Changed it to thearrarys
for (var i = 0; i < thearrays.length; i++) {
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById(thearrays[i]
).style.visibility = 'visible';
}
else if (document.all)
{
alert("Running an older version of IE.");
// I do not know the syntax to avoid the eval.
// I assume there is a way.
eval("document.all." + thearrays[i] +
".style.visibility = 'visible'");
}
else
{ alert("Cannot change visibility of address field"); }
} // of for
} // of function
</script>
</head>
<body>
<br><br><br><br>
<p>Please try out our form.</p>
<form action="" method="post">
<div class="form-item">
<div id="cat73|cat88">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][73]"
value="73"
onchange="dodisplaytbyarray('cat1')" > business
</div>
<div style="visibility:hidden;position:absolute;top:0;left:0"
id="cat1">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][1]"
value="1">-- agriculture
</div>
<div style="visibility:hidden;position:absolute;top:0;left:0"
id="cat88">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][88]"
value="88">-- B2B
</div>
</div>
</form>
</body>
</html>
--------------------------------------------------------------------
In a similar use of the hidden visible tag, IE works. Try this file:
<html>
<head>
<title>Radio buttons</title>
<style type="text/css">
.formStyle {position:relative; visibility:visible;}
</style>
<script type="text/javascript">
function validate()
{
var x = document.forms["myForm"];
var checkedButton;
// Figure out which radio button was pressed
if (x.receiveVia[0].checked == true)
{ checkedButton = x.receiveVia[0].value;}
else if (x.receiveVia[1].checked == true)
{ checkedButton = x.receiveVia[1].value;}
else
{ checkedButton = '';}
var varName = x.theName.value;
var varEmail = x.theEmail.value;
var varAddress = x.theAddress.value;
alert("checkedButton = " + checkedButton +
" varName = " + varName +
" varEmail = " + varEmail +
" varAddress = " + varAddress);
// I changed submitOK to a boolean variable.
var submitOK = true;
// Validate email: name and email
if (checkedButton == "byEmail")
{
alert("verifying email fields.");
if (varName == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress != '')
{
alert("Please erase the address field.");
submitOK = false;
}
return submitOK;
}
// Validate print: name, email, and address
else if (checkedButton=="printed")
{
alert("Verifying printed fields");
// Error message should be in the order on the form
if (varName.length == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress == '')
{
alert("You must enter your Address");
submitOK = false;
}
return submitOK;
}
else
{
alert("You need to select either email or print.");
return false;
}
}
function showHidden(doWhat)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById("field3").style.visibility = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.field3.style.visibility = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}
</script>
</head>
<body>
<p>Please try out our form.</p>
<form name="myForm"
action="http://www.nonamedomain.com"
method="POST"
onsubmit="alert('submitting');return validate();">
<!-- semicolons (;) are recommended in event handlers like onclick -->
<p><input type="radio" name="receiveVia" value="printed"
onclick="showHidden('visible');"> Printed
brochure</p>
<p><input type="radio" name="receiveVia" value="byEmail"
onclick="showHidden('hidden');
document.forms['myForm'].theAddress.value = '';"> Via
Email</p>
<!-- I like to use component names to avoid conflicts with
reserved words. -->
<p>Name:<br>
<input type="text" name="theName" size="20"><br><br>
Email:<br>
<input type="text" name="theEmail" size="20"><br>
<script type="text/javascript">
// Only insert a div if we can change it
if (document.getElementById || document.all)
{ document.write("<div id='field3' class='formStyle'>");}
</script>
Postal address:<br>
<input type="text" name="theAddress" size="40">
<script type="text/javascript">
if (document.getElementById || document.all)
{ document.write("</div>");}
</script>
</p>
<!-- Netscape 4.x doesn't seem to support the onclick event
handler, so I moved the checking code to the form
onsubmit. Netscape doesn't support the alt tag. -->
<p><input type="image" src="submit.gif" border="0" value="Submit"
width="75" height="17"
ALT="Submit button"></p>
</form>
<script type="text/javascript">
// In the case of a reload, the radio button may already be clicked.
// This code needs to be after the form.
var x = document.forms["myForm"];
if (x.receiveVia[0].checked == true)
{ showHidden('visible');}
else if (x.receiveVia[1].checked == true)
{ showHidden('hidden');}
else
{ ;}
</script>
</body>
</html>