show/hide used on checkboxes not working on IE6

**Michael Winter** · Jul 23 '05, 01:01 PM

Re: show/hide used on checkboxes not working on IE6

On Thu, 12 Aug 2004 16:31:19 +0200, sergio <nospam@nospam. com> wrote:

[snip]
[color=blue]
> <script language="JavaS cript" type="text/javascript">[/color]

The language attribute is deprecated; remove it. Moreover, the type
attribute makes it redundant.
[color=blue]
> function dodisplaytbyarr ay(thewhat) {
> if (navigator.appN ame.indexOf("Mi crosoft",0) != -1) {
> var docloc = "document.all." ,style = ".style";
> }
> var thearrays = new Array();
>
> thearrays = thewhat.split(" |");
> for (var i = 0; i < "+thearrays+".l ength; i++) {
> eval(docloc+the arrays[i]+style+".visibi lity='visible'" );
> eval(docloc+the arrays[i]+style+".positi on='relative'") ;
> }[/color]

I can guarantee, even without testing it, that that script won't work in
any browser. Even if you corrected the syntax errors, it only has a chance
of working in IE, and I don't see it doing anything useful even then.

If you retyped this, I suggest you don't. It usually leads to errors.
Repost the script and HTML, or better yet, a URL to the page.
[color=blue]
> </script>
> <form action="" method="post">
> <div class="form-item"><div id="cat73|cat88 "><input type="checkbox"[/color]

I also suggest that you validate your HTML. The id in that second DIV
element is invalid. id attributes may only contain "letters, digits
([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods
(".")" (HTML 4.01 Specification). They must also "begin with a letter
([A-Za-z])".

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail

**Robert** · Jul 23 '05, 01:01 PM

Re: show/hide used on checkboxes not working on IE6

"sergio" <nospam@nospam. com> wrote in message news:<411b7f46$ 0$310$ba620e4c@ news.skynet.be> ...[color=blue]
> Hi 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
>[/color]

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 dodisplaytbyarr ay(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.lengt h; i++) {

// Check if the getElementById method is available
if (document.getEl ementById)
{
document.getEle mentById(thearr ays[i]
).style.visibil ity = '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.visibil ity = '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="dodis playtbyarray('c at1')" > business
</div>
<div style="visibili ty:hidden;posit ion:absolute;to p:0;left:0"
id="cat1">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][1]"
value="1">-- agriculture
</div>
<div style="visibili ty:hidden;posit ion:absolute;to p: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:relat ive; visibility:visi ble;}
</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.valu e;
var varAddress = x.theAddress.va lue;

alert("checkedB utton = " + 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("verifyin g 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("Verifyin g 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(doWh at)
{
// Check if the getElementById method is available
if (document.getEl ementById)
{
document.getEle mentById("field 3").style.visib ility = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.fi eld3.style.visi bility = 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.nonamedomai n.com"
method="POST"
onsubmit="alert ('submitting'); return validate();">

<p><input type="radio" name="receiveVi a" value="printed"
onclick="showHi dden('visible') ;"> Printe d
brochure</p>
<p><input type="radio" name="receiveVi a" value="byEmail"
onclick="showHi dden('hidden');
document.forms['myForm'].theAddress.val ue = '';"> Via
Email</p>

<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.getEl ementById || document.all)
{ document.write( "<div id='field3' class='formStyl e'>");}
</script>
Postal address:<br>
<input type="text" name="theAddres s" size="40">
<script type="text/javascript">
if (document.getEl ementById || document.all)
{ document.write( "</div>");}
</script>
</p>

<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('vis ible');}
else if (x.receiveVia[1].checked == true)
{ showHidden('hid den');}
else
{ ;}

</script>
</body>
</html>

**Thomas 'PointedEars' Lahn** · Jul 23 '05, 01:01 PM

Re: show/hide used on checkboxes not working on IE6

Robert crossposted over 4(!) newsgroups in 3(!) main hierarchies,
^^^^^^
while the subject being off-topic in 2 of them, without Followup-To:
[color=blue]
> "sergio" <nospam@nospam. com> wrote in message
> news:<411b7f46$ 0$310$ba620e4c@ news.skynet.be> ...[/color]

Please do not write attribution novels. The name of the
poster of the precursor is sufficient most of the time,
see <http://netmeister.org/news/learn2quote.htm l>.
[color=blue][color=green]
>> 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[/color][/color]
^^^^^^
How should one address you anyway?
[color=blue]
> I'll provide some more information to the problem here. Maybe it will
> help someone come up with a solution...
> [more hundreds of lines of source code lacking a minimal clue about the
> language][/color]

<http://jibbering.com/faq/#FAQ2_3>

F'up2 comp.lang.javas cript

PointedEars

**Robert** · Jul 23 '05, 01:01 PM

Re: show/hide used on checkboxes not working on IE6

"sergio" <nospam@nospam. com> wrote in message news:<411b7f46$ 0$310$ba620e4c@ news.skynet.be> ...[color=blue]
> Hi 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?[/color]

I have looked into the problem some more. It has to do with the event
handler. I changed it to onclick and IE seems to work better. IE
works fine with the onclick event handler and the inclusion of an
alert. Take out the alter and IE seems to miss some of the clicks.

I tried this in IE 5.2 on MacOS 10.2.6.

One should blame the OP if I posted the prior post too much because I
posted where the original post went too. Blame google.

I said the one script worked and the other did not. I didn't know why
at the time.

I tried the following routine:

<html>
<head>
<title>forms checking</title>

<style type="text/css">
..form-checkbox {color:black; }
..form-item {color:black; }
..formStyle {position:relat ive; visibility:visi ble;}
</style>

<script type="text/javascript">
function dodisplaytbyarr ay(thewhat) {
var x = document.forms["myForm"];
var checkedButton;
var thearrays = new Array();

if (x.elements["edit[Category][73]"].checked == true)
{ checkedButton = "visible";}
else
{ checkedButton = "hidden";}

alert("checkedB utton = " + checkedButton);

thearrays = thewhat.split(" |");

for (var i = 0; i < thearrays.lengt h; i++) {

// Check if the getElementById method is available
if (document.getEl ementById)
{
document.getEle mentById(thearr ays[i]
).style.visibil ity = checkedButton;

}
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.visibil ity = " + checkedButton);
}
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"
name="myForm">
<div class="form-item">
<div id="cat73|cat88 ">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][73]"
value="73"
onclick="dodisp laytbyarray('ca t1')" > business
</div>
<div style="visibili ty:hidden;posit ion:absolute;to p:0;left:0"
id="cat1">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][1]"
value="1">-- agriculture
</div>
<div style="visibili ty:hidden;posit ion:absolute;to p:0;left:0"
id="cat88">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][88]"
value="88">-- B2B
</div>
</div>
</form>

</body>
</html>

**sergio** · Jul 23 '05, 01:02 PM

Re: show/hide used on checkboxes not working on IE6

Robert,
Thanks a lot for your help! I finally got it working. After some testing my
conclusion is that the <div style=position: ??><input></input><div> does not
work very well when setting the position:absolu te dynamically. That is why
your last post works well on showing, but it does not work well when
positioning.

So.... my workaround has been to use the attibute "display" which is part of
CSS1, seems to work on NN4 and IE4.

Below is the code.
Thanks again for your help,
Sergio

----------------------------------
<html>
<head>
<title>forms checking</title>
<script type="text/javascript">
function dodisplaytbyarr ay(thewhat) {
var x = document.forms["myForm"];
var thedisplay,ok;
var thearrays = new Array();

if (x.elements["edit[Category][73]"].checked == true)
{ thedisplay = "";}
else
{ thedisplay = "none";}

thearrays = thewhat.split(" |");

for (var i = 0; i < thearrays.lengt h; i++) {

// Check if the getElementById method is available
if (document.getEl ementById)
{
document.getEle mentById(thearr ays[i]).style.display = thedisplay;
}
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.dis play = " + thedisplay);
}
else
{ alert("Cannot change visibility of address field"); }

}
}

</script>
</head>

<body>
<p>Please try out our form.</p>
<form action=""
method="post"
name="myForm">
<div id="cat73" class="form-item">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][73]"
value="73"
onclick="dodisp laytbyarray('ca t1|cat88')"[color=blue]
> business[/color]
</div>
<div style="display: none"
id="cat1">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][1]"
value="1">-- agriculture
</div>
<div style="display: none"
id="cat88">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][88]"
value="88">-- B2B
</div>
text to see if it flows
</form>
</body>
</html>

**Michael Winter** · Jul 23 '05, 01:02 PM

Re: show/hide used on checkboxes not working on IE6

On Fri, 13 Aug 2004 11:04:44 +0200, sergio <nospam@nospam. com> wrote:

[snip]
[color=blue]
> // I do not know the syntax to avoid the eval.
> // I assume there is a way.
> eval("document. all." + thearrays[i] +
> ".style.dis play = " + thedisplay);[/color]

document.all[thearrays[i]].style.display = thedisplay;

By the way, just as you check for support of getElementById( ) and all[],
you should check that the style object is supported, too.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail

**Mick White** · Jul 23 '05, 01:02 PM

Re: show/hide used on checkboxes not working on IE6

sergio wrote:
[snip][color=blue]
>
> So.... my workaround has been to use the attibute "display" which is part of
> CSS1, seems to work on NN4 and IE4.
>[/color]

Not in NN4.....
Mick

**Robert** · Jul 23 '05, 01:02 PM

Re: show/hide used on checkboxes not working on IE6

> So.... my workaround has been to use the attibute "display" which is part of[color=blue]
> CSS1, seems to work on NN4 and IE4.
>[/color]

On IE 5.2 on MacOS 10.2.6, if you pause between clicks all is well.
If you click quickly, IE will eventually get confused. In IE 4.72 on
Windows 95, all is well.

NN4.x cannot reflow text.

Glad that I was able to assist.

Robert

**Dr John Stockton** · Jul 23 '05, 01:02 PM

Re: show/hide used on checkboxes not working on IE6

JRS: In article <1220522.Jmk2SB DXYm@PointedEar s.de>, dated Thu, 12 Aug
2004 22:54:46, seen in news:comp.lang. javascript, Thomas 'PointedEars'
Lahn <PointedEars@we b.de> posted :[color=blue]
>Robert crossposted over 4(!) newsgroups in 3(!) main hierarchies,
>^^^^^^[/color]

That is perfectly permissible, provided that he considers the article to
be on-topic in all, as the OP did. There is, rightly, nothing in the
current usenet standards against cross-hierarchy posting.

However, posting by the OP to c.l.j.j was unwise, since the group has no
legitimate existence. Why did you fail to note that?

Also, posts in borland.* should be injected at Borland's server only,
and not cross-posted; it is a private hierarchy, improperly copied on
some other servers. Why did you fail to note that? Why, indeed, did
you break that rule yourself?
[color=blue]
>while the subject being off-topic in 2 of them, without Followup-To:[/color]

There is no requirement to set follow-up to a single group, or to fewer
groups, if an author considers all groups to be on-topic. An author is
perfectly entitled to be wrong in such matters, provided that it is
unintentional.

[color=blue][color=green]
>> "sergio" <nospam@nospam. com> wrote in message
>> news:<411b7f46$ 0$310$ba620e4c@ news.skynet.be> ...[/color]
>
>Please do not write attribution novels. The name of the
>poster of the precursor is sufficient most of the time,
>see <http://netmeister.org/news/learn2quote.htm l>.[/color]

There is no such requirement in current thinking; see

IETF - 404 - Not Found

http://www.ietf.org/internet-drafts/draft-ietf-usefor-useage-00.txt

IETF - 404 - Not Found

http://www.ietf.org/internet-drafts/draft-ietf-usefor-article-13.txt

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 MIME ©
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demo n.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.

show/hide used on checkboxes not working on IE6

show/hide used on checkboxes not working on IE6

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment