Adding javascript to select element won't work on Firefox browser.

[tjc0ol]

Hi all,
I made contact page which allows visitors to input their name, email address, phone number, comments and select a comment type by using <select> element in html with javascript. Among the option of it are: General Support, Technical Support, Sales in billing, Request RA no. and Others. If they select Others there will be a pop-up textbox for others(so they can specify a comment type) and the textbox is placed on a DIV. I placed CSS on it in which the Visibility is set to "hidden" and put an ID to the DIV which is equivalent to <div id="oh">.
The problem is that the script won't work on FireFox but it will work on IE7, IE6, Safari & Opera browsers.

How to make it work on FireFox browsers?

Here's my html and javascript code below:

[HTML]
<form name="cont" action="feedback.php" method="post">
<fieldset>
<legend class="ledgender">Contact US</legend>
<table border="0" cellpadding="8" cellspacing="8" summary="feedback form" align="center">
<tr><td>Name:</td><td ><input type="text" name="name" size="37" /></td></tr>
<tr><td>Email address:</td><td ><input type="text" name="email" size="37" /></td></tr>
<tr><td>Telephone No.:</td><td ><input name="telno" type="text" size="37" /></td></tr>
<tr><td>Comment Type:</td>
<td >
<select name="attn" onchange="disable_enable()">
<option value=" General Support ">General Support</option>
<option value=" Technical Support ">Technical Support</option>
<option value=" Sales In Billing ">Sales In Billing</option>
<option value=" Request Return Authorization (RA) No. ">Request Return Authorization (RA) No.</option>
<option value=" Others ">Others</option> </select></td></tr>
<tr><td class="txt-centre" colspan="2">
<div id="oh"><strong>Others: </strong><input name="anothers" type="text" size="37" disabled="disabled" /></div></td></tr>
<tr>
<td colspan="2">
Comments<br />
<textarea rows="15" cols="55" name="comments"></textarea>
</td></tr>
<tr><td align="center" colspan="2">
<input type="submit" value="Send Feedback" />
</td>
</tr>
</table>
</fieldset>
</form>
[/HTML]

<script type="text/javascript">
<!--
function disable_enable(){
if (document.cont.attn.options[document.cont.attn.selectedIndex].text=="Others"){
document.cont.anothers.disabled=false;
oh.style.visibility='visible';
}
else
   {                
 document.cont.anothers.disabled=true;
 document.cont.anothers.value='';
 oh.style.visibility='hidden';
   }
}
//-->
</script>

Thanks in advance. -tj

[Gulzor]

try to initialize js var "oh" first :

var oh = document.getElementById("oh");

then

oh.style.visibility = "hidden"; // or "visible"

[maminx]

To make sure, try to make the
alert("enter");

right after the function, to make sure whether the function being called or not.
If the problem is that you can't enter the function disable_enable() in Firefox, change your HTML select command like this below :

[HTML] <select name="attn" onchange="javascript:disable_enable();">
[/HTML]
or

[HTML] <select name="attn" onchange="return disable_enable();">[/HTML]


best regards,

maminx

[maminx]

and of course, what is the error that show in the browser??

[tjc0ol]

try to initialize js var "oh" first :

var oh = document.getElementById("oh");

then

oh.style.visibility = "hidden"; // or "visible"

Thanks a lot, I tried this one and it work. -tj

[tjc0ol]

and of course, what is the error that show in the browser??

In Firefox when you clicked on the others in <select> there's no pop-up will show.

By the way I tried your code above and it won't work. Anyways thanks for the infos. -tj