[RESOLVED] Visibility Adjusting Using Javascript ... Only works in FireFox

[jabbamonkey]

I have a web form...
https://www.swimfree.org/adoptaswimmer/

When the user chooses the "Other" option from the "Number of Swimmers" pulldown, a new field should appear to the right of the pulldown. We accomplish this in FireFox using javascript to adjust the visibility of the div tag around the new field.

However, this is NOT working in Chrome or IE. We have also tried substituting visibility for display data, but that did not work either. Please help!!!!

Here is the javascript code...

<script type="text/javascript">
    function ShowAvailability(val)
    {
        if(val == "Other")
        {
	   document.getElementById('divamount').style.visibility = "visible";
        } else {
            document.getElementById('divamount').style.visibility = "hidden";
        } 
    }
</script>

And here is the form element, and the hidden field...

<!-- PULLDOWN - ACTIVATES OTHER FIELD MAKING IT VISIBLE -->
<select name="donation_amount"  id="donation_amount" style="width:110px; height:25px;" >
        <option value="-1"></option>        
        <option value="1" id="donation_amount">1</option>
        <option value="2" id="donation_amount">2</option>
        <option value="3" id="donation_amount">3</option>
        <option value="4" id="donation_amount">4</option>
        <option value="5" id="donation_amount">5</option>
        <option value="6" id="donation_amount">6</option>
        <option value="7" id="donation_amount" >7</option>
        <option value="8" id="donation_amount" >8</option>
        <option value="9" id="donation_amount" >9</option>
        <option value="10" id="donation_amount" >10</option>
        <option value="Other" id="donation_amount" onclick="ShowAvailability(this.value)")>Other</option> 
        </select>    

<!-- ERROR MESSAGE - IF NO OPTION SELECTED FROM PULLDOWN -->
<script type="text/javascript"> 
          var donation_amount = new LiveValidation('donation_amount');
          donation_amount.add(Validate.Exclusion, { within: ['-1'], failureMessage: "Please select NUMBER OF TICKETS!"});
</script> 

<!--  HIDDEN FIELD - SHOULD BECOME VISIBLE WHEN OTHER IS SELECTED-->
<span id="divamount" name="divamount" style="visibility:hidden;"><input type="text" id="_donationamout" name="_donationamout" vaue="" style="width:50px;" /></span>

[Sterling Isfine]

<option value="Other" id="donation_amount" onclick="ShowAvailability(this.value)")>Other</option>

Option elements do not as standard support events.
Use the onchange event of the <select> tag.

[MikeOS]

You can't put an onlick in an option element for IE, below I deleted the onclick and added an onchange to the select element, the code now works.

<select name="donation_amount"  id="donation_amount" style="width:110px; height:25px;" onchange="ShowAvailability(this.value)">
        <option value="-1"></option>        
        <option value="1" id="donation_amount">1</option>
        <option value="2" id="donation_amount">2</option>
        <option value="3" id="donation_amount">3</option>
        <option value="4" id="donation_amount">4</option>
        <option value="5" id="donation_amount">5</option>
        <option value="6" id="donation_amount">6</option>
        <option value="7" id="donation_amount" >7</option>
        <option value="8" id="donation_amount" >8</option>
        <option value="9" id="donation_amount" >9</option>
        <option value="10" id="donation_amount" >10</option>
        <option value="Other" id="donation_amount">Other</option> 
        </select>

[jabbamonkey]

Awesome! Thanks alot!!

[Fang]

id must be unique