problem calling an onchange event with dropdown menu in div

[spastica]

i have a dropdown menu that is contained in a div. when the user selects "other" from this dropdown menu, a function is called onchange and a textbox contained in a seperate div automatically shows up.

this works fine in explorer, but is not working in netscape or firefox.

if i take the dropdown menu out of the div, everything works fine in all 3 browsers.

what could be the problem? i know it must be something to do with the dropdown being in a div, but i can't take it out of the div because it can only show up when the user selects a radio button option, and must be hidden if the user does not select the radio button.

here is what i have:

<!-- javascript function -->

<script language="JavaScript">

// FUNCTION TO SHOW REFINANCE:OTHER (PLEASE SPECIFY) BOX IF "OTHER" OPTION IS SELECTED UNDER REFINANCE - PURPOSE
<!--
function showRefiOtherbox(formData)
{

document.mtgapp.natureOfMtg[1].checked

if(formData=="Other")
{
document.getElementById('refiPurpose_OtherBox').innerHTML = "Please specify: <input maxlength=\"60\" size=\"15\" type=\"text\" name=\"refiPurpose_Other\">";
}
else
{
document.getElementById('refiPurpose_OtherBox').innerHTML = "";
}

}
// -->
</script>




<!-- div for the refi purchase other box -->


<div id="refiPurpose_OtherBox" class="mainbodytext" style="position:relative; left:290px; top:20px; width:250px; height:0px; z-index:1;">


</div>


<!-- div containing the dropdown menu - it also has asp but this is not what is interfering with the code -->


<div id="refiPricePurch" class="mainbodytext">

Purpose for refinance:
<select name="refiPurpose" onChange="showRefiOtherbox(this.form.refiPurpose.value)">
<option value="" <%call chkDropDown("refiPurpose", "")%>>Select an option</option>
<option value="Debt Consolidation" <%call chkDropDown("refiPurpose", "Debt Consolidation")%>>Debt Consolidation</option>
<option value="Home Improvements" <%call chkDropDown("refiPurpose", "Home Improvements")%>>Home Improvements</option>
<option value="Other" <%call chkDropDown("refiPurpose", "Other")%>>Other</option>
</select>
</div>

 

[cLFlaVA]

Suggestions:

Change your function to this:

function showRefiOtherbox(formData) {
    var o = document.getElementById('refiPurpose_OtherBox');
    if (formData == "Other") {
        e.style.display = '';
    } else {
        e.style.display = 'inline';
    }
}

Change your [tt]<div>[/tt] to this:

<div id="refiPurpose_OtherBox" class="mainbodytext" style="position:relative; left:290px; top:20px; width:250px; height:0px; z-index:1; display: none;">
Please specify: <input maxlength="60" size="15" type="text" name="refiPurpose_Other">
</div>

And the call to your function to this:

<select name="refiPurpose" onchange="showRefiOtherbox(this.value)">

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!