How do I fix my javascript so the div visibility works in IE or Chrome?

J

jabbamonkey

New member
I have a webform...
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, 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 -->
<span id="divamount" name="divamount" style="visibility:hidden;"><input type="text" id="_donationamout" name="_donationamout" vaue="" style="width:50px;" /></span>
 
Back
Top