www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Jun 2003
    Posts
    72

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

    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...
    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...
    Code:
    <!-- 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>

  2. #2
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by jabbamonkey View Post
    Code:
    <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.

  3. #3
    Join Date
    Nov 2002
    Location
    London UK
    Posts
    154
    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.

    Code:
    <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>

  4. #4
    Join Date
    Jun 2003
    Posts
    72
    Awesome! Thanks alot!!

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles