hidden/visible selects [Archive]

tripwater

10-20-2003, 04:22 PM

I have a form that when you select a country other than USA or you select the Default which has a value of "", you will see a drop list of states. If you change the country to another country then I hide the select and show a text field allowing them to type the name of their providence.

I have it working in IE and can't get it to work in Netscape/Mozilla/Galleon. Right now in these other browsers, if you change the country to say Canada, it hides the select and shows the text field but when you pick USA again it does not go back. I was wondering if someone could take a look at my code and tell me what I am doing wrong.

Here is my HTML:

<html>
<head>
<title>hide Drop Down</title>
<style>

</style>

<script language="JavaScript1.2" src="hidefield.js">
</script>

</head>

<form name="form1"> <br>

<div id="select1">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<select name=dF onchange="javascript:change();">
<option value="">Select Country
<option value=0> USA
<option value=1> Canada
<option value=2> UK
</select>
</td>
</tr>
</table>
</div>

<div id="select2">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<input type=text name=state>
</td>
</tr>
</table>
</div>

<div id="select3">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<select name=dF2>
<option>Hello
<option>World
</select>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Here is my src JS code :

ns5 = (document.getElementById&&!document.all)? true:false
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

NS6 = (document.getElementById && !document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

var layerRef,styleRef
if (NS6)
{
layerRef = "document.getElementById('"
styleRef = "').style."
}
else
{
layerRef = (document.all) ? "" : "document.";
styleRef = (document.all) ? ".style." : ".";
}

function show(block)
{
eval(layerRef + block + styleRef + "visibility = 'visible'");
}

function hide(block)
{
eval(layerRef + block + styleRef + "visibility = 'hidden'");
}

function change()
{
if (document.form1.dF.value == 0)
{
hide('select2');
show('select3');
}
else
if (document.form1.dF.value != 0 && document.form1.dF.value != "")
{
hide('select3');
show('select2');
}

}

Thanks ahead for any help on this.

freefall

10-20-2003, 08:18 PM

Hello,

Looking at your code, I think I've nailed the problem. Your code is great, very nicely-done, but the fail point seems to be as simple as the script tag itself.

Try this same script again, replacing language="JavaScript1.2" with type="text/javascript". This works in IE, NS, Opera, Mozilla, etc.

I couldn't tell you definitively why the language tag is causing problems (maybe a veteran of the forums has an answer to that one), but I've always coded under the type instead of language, it seems to be much more friendly.

Good luck with the rest of your code,
Ian Paterson

www.degreethree.com/newsite

tripwater

10-21-2003, 08:24 AM

Thank you, that did it!

freefall

10-21-2003, 02:06 PM

No problem, if you need any more help, I'm here, but it looks to me like you've got a pretty good understanding of this whole javascript thing.

Have a great day!
- Ian

nkaisare

10-21-2003, 03:01 PM

Trip,
You do not need the table in this example.

There may be a problem for people who have javascript turned off. May be you want to start with all elements with visibility: visible and use an onload function to change the visibility of #select2.

Also, I hope you don't use javascript to submit the form.
- niket