Visible/invisible textbox in div with netscape using a select 1

torontozfinest · Nov 5, 2003

Hey Folks,

Im trying to make a textbox appear when a particular option is selected with a select input. I need compatibility between entscape and IE 6 (intranet). It works fine in explorer but when I try accessing the code in netscape only the text labels to the textboxes show up and not the textboxes themselves. Can anyone give me assistance (hopefully without changing the code to drastically) THANKS IN ADVANCE. GREAT FORUM.

Here is the code:

<HTML>
<head>

<script language='javascript'>

function showhide(objSelect){

if (objSelect.options[objSelect.selectedIndex].value == "test&quot

{

if(document.layers){

document.hideshow.visibility = 'visible';
}
else{
document.getElementById('hideshow').style.visibility = 'visible';
}

}
else{
if(document.layers){

document.hideshow.visibility = 'hidden';
}
else{

document.getElementById('hideshow').style.visibility = 'hidden';
}
}
}

</script>

<title>
Incoming
</title>
</head>

<body background = #FFFFFF text=#0000FF>
<form>

<table border=1 width=950 height=800 align=center cellspacing=0 cellpadding=0>
<tr><td>

<select name=test id=test onChange='showhide(this)'>
<option>eatesatstest</option>
<option value=test>eatesatste</option>
<option>test</option>
</select>

<div name='hideshow' ID='hideshow' style='visibility:hidden;position:relative'>

Input number : <input type=text name=blah><br>
Input Code : <input type=text name=blah><br>

</div>

</td></tr>
</table>

</form>
</body>

</HTML>

dkdude · Nov 5, 2003

Hi there,

In stead of visibility, try using this on your object:

Hide object:

Code:

style.display = 'none';

Show object:

Code:

style.display = 'block';

Good Luck §;O)

Jakob

torontozfinest · Nov 5, 2003

thanks alot but again it worked in IE and not in netscape. This time around not even the labels disapeared and reappeared with the block. By the way I left out a important and irritating fact. The netscape version is 4.75 =(.

How do I refer to style.display [block/none] in the javascript in form compatible to NS?

In surfing for my answer I read that netscape 4x does not support visibility on form objects but that there is a workaround?

More assistance please!

dkdude · Nov 5, 2003

torontozfinest,

Try this example in both browsers. It also shows you how to access the display property:

Code:

<HTML> <HEAD> <TITLE>Simple Test</TITLE> <SCRIPT LANGUAGE="JavaScript"> function hideMe() { document.all.toggleMe.style.display = 'none'; } function showMe() { document.all.toggleMe.style.display = 'block'; } </SCRIPT> </HEAD> <BODY> <A HREF="javascript:showMe()">Show the hiddin DIV</A> : <DIV ID="toggleMe" STYLE="display : none;"> <A HREF="javascript:hideMe()">Click to hide me!</A> </DIV> </BODY> </HTML>

Hope it works for you!

Good Luck §;O)

Jakob

dkdude · Nov 5, 2003

One more thing. According to W3Schools.com's CSS reference it should work from NN 4.0 up.

Here's the link:

http://www.w3schools.com/css/css_reference.asp

Excellent online reference, by the way -I often use it. They also have a HTML refence -look for yourself.

Hope you find it as usefull as I!

Happy Coding §;O)

Jakob

torontozfinest · Nov 5, 2003

Thanks again. I found the problem. The input boxes I was using in the DIV were not enclosed in their own form tags. Seems like you cannot have a layer as part of a form in netscape. It has to be in its own separate form. I'l have to catch the data from the first form on submit and send it along with the data in the second form thanks to everyones best friend, netscape.

Bookmarked the page htough. Thanks!

torontozfinest · Nov 5, 2003

NEW PROBLEM lol. Now when I put the form in the DIV and i try and call to an outside javscript function via an on submit call, IT WILL NOT WORK. When i take it OUT of the DIV it works fine? ANY HELP PLEASE!! code below

<HTML>
<head>

<script language='JavaScript'>

function showhide(objSelect){

if (objSelect.options[objSelect.selectedIndex].value == "test&quot

{

if(document.layers){

document.hideshow.visibility = 'visible';
}
else{
document.getElementById('hideshow').style.visibility = 'visible';

}

}
else{
if(document.layers){

document.hideshow.visibility = 'hidden';
}
else{

document.getElementById('hideshow').style.visibility = 'hidden';
}
}
}

function frmsub(){

alert("work&quot

;

}

</script>

<title>
Incoming
</title>
</head>

<body background = #FFFFFF text=#0000FF>

<table border=1 width=950 height=800 align=center cellspacing=0 cellpadding=0>
<tr><td>
<form name='depart'>
<select name=test id=test onChange='showhide(this)'>
<option>eatesatstest</option>
<option value=test>damn it</option>
<option>test</option>
</select>
</form>

<div name='hideshow' ID='hideshow' style='visibility:hidden;position:relative'>

<form method='post' name='testing' onSubmit='frmsub()'>
Input number : <input type=text name=blah><br>
Input Code : <input type=text name=blahtoo><br>
<input type=hidden name=dept value=empty>
<input type=submit>
</form>

</div>

</td></tr>
</table>

</body>

</HTML>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Visible/invisible textbox in div with netscape using a select 1

torontozfinest

Technical User

dkdude

Programmer

torontozfinest

Technical User

dkdude

Programmer

dkdude

Programmer

torontozfinest

Technical User

torontozfinest

Technical User

Similar threads

Part and Inventory Search

Sponsor