js and dhtml script to change forms in layers in NN - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

js and dhtml script to change forms in layers in NN

js, dhtml, dom, forms

tommo

11:24 am on May 7, 2003 (gmt 0)

I have a problem with adapt a simple IE JS script to a Netscape browsers.
If you please, help me...
with best ...
tomek
SCRIPT:

<html>
<head>

<script language="JavaScript">
nn4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

function changeForm(form) {
var oSel = eval("form.kategorie");
var userSelection = oSel.options[oSel.selectedIndex].value;

switch (userSelection) {
case "war1" :
if (ie4) {
document.all.Warstwa2Label.style.display = "block";
form.warstwa2.style.display = "block";
document.all.Warstwa3Label.style.display = "block";
form.warstwa3.style.display = "block";
}
if (nn4) {

}
break;

default :
if (ie4) {
document.all.Warstwa2Label.style.display = "none"
form.warstwa2.style.display = "none"
document.all.Warstwa3Label.style.display = "none";
form.warstwa3.style.display = "none";
}
if (nn4) {

}
break;
}
return;
}

</script>
</head>

<body>
<form id="dhtmlForm" action="plik.php" method="post">

<select size="1" id="kategorie" onchange="changeForm(this.form);">
<option name="default" value="default">opcja 0
<option name="warstwa 1" value="war1">opcja 1
<option name="warstwa 2" value="war2">opcja 2
</select>

<br>Opis1<br>
<input type="text" name="cena" size="7" class="input" style="width: 60px;">

<div id="Warstwa2Label" style="display:none;">Opis2
<input name="warstwa2" id="warstwa2_id" type="text" size="7" class="input" style="display:none; width: 60px;">
</div>

<div id="Warstwa3Label" style="display:none;">Opis3
<input name="warstwa3" id="warstwa3_id" type="text" size="7" class="input" style="display:none; width: 60px;">
</div>

</form>
</body>
</html>

BlobFisk

11:30 am on May 7, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Welcome to WebmasterWorld, tommo!

I've only taken a very brief glance at your code, but have you tried using the style.visibility='visible' and style.visibility='hidden'?

You may have more success with this....

rainborick

6:15 pm on May 7, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

The previous poster's suggestion about modifying the visibility property is a good one, especially if you need to support NS4. I was interested in this kind of code for another purpose, so I checked Eric Meyer's handy CSS compatibility chart and discovered (not surprisingly) that NS4's support of the "display" property is listed as partial/buggy, but it does handle visibility just fine. Another complication I see is that the code posted here does not account for Netscape v6.x and higher (or many other standards-compliant browsers). So I'd suggest code along the following lines (BE SURE TO SEE THE WARNINGS BELOW!):


<script type="text/javascript" language="JavaScript">
nn4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;function changeForm(form) {
var oSel = eval("form.kategorie");
var userSelection = oSel.options[oSel.selectedIndex].value;
switch (userSelection) {
case "war1" :
 if (document.getElementById) {
 theElement = document.getElementById("Warstwa2Label");
 theElement.style.visibility = "visible";
 theElement = document.getElementById("warstwa2");
 theElement.style.visibility = "visible";
 theElement = document.getElementById("Warstwa3Label");
 theElement.style.visibility = "visible";
 theElement = document.getElementById("warstwa3");
 theElement.style.visibility = "visible";
 } else if (ie4) {
document.all.Warstwa2Label.style.visibility = "visible";
form.warstwa2.style.visibility = "visible";
document.all.Warstwa3Label.style.visibility = "visible";
form.warstwa3.style.visibility = "visible";
} else if (nn4) {
 theElement=document.layers["Warstwa2Label"];
 theElement.visibility = "visible";
 theElement=document.layers["warstwa2"];
 theElement.visibility = "visible";
 theElement=document.layers["Warstwa3Label"];
 theElement.visibility = "visible";
 theElement=document.layers["warstwa3"];
 theElement.visibility = "visible";
}
break;
default :
 if (document.getElementById) {
 theElement = document.getElementById("Warstwa2Label");
 theElement.style.visibility = "hidden";
 theElement = document.getElementById("warstwa2");
 theElement.style.visibility = "hidden";
 theElement = document.getElementById("Warstwa3Label");
 theElement.style.visibility = "hidden";
 theElement = document.getElementById("warstwa3");
 theElement.style.visibility = "hidden";
 } else if (ie4) {
document.all.Warstwa2Label.style.visibility = "hidden";
form.warstwa2.style.visibility = "hidden";
document.all.Warstwa3Label.style.visibility = "hidden";
form.warstwa3.style.visibility = "hidden";
} else if (nn4) {
 theElement=document.layers["Warstwa2Label"];
 theElement.visibility = "hidden";
 theElement=document.layers["warstwa2"];
 theElement.visibility = "hidden";
 theElement=document.layers["Warstwa3Label"];
 theElement.visibility = "hidden";
 theElement=document.layers["warstwa3"];
 theElement.visibility = "hidden";
}
break;
}
return;
}</script>

The above code is not going to work for you without changes. This code assumes that all of the "Warstwa..." references are actually the ID attributes of <div>s enclosing the items, and I can see that's not going to be true. Further, for the NS4 support to work, the <DIV>s must have "position:absolute;". So, at best this will give you some structures to play with. I hope it helps.