Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Location
    Houston, TX
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Show/Hide from selection in drop-down

    I can't seem to get this work, can anyone please help me. Thanks.

    Code:
    <cfform name= "myform">
    <div id = "div1">
    
    Recommended by:-
    <cfselect name="type_name" select id = "sel1" onchange = "showTR();">
    	<option>Select Type</option>
        <cfoutput query="type_name">
        <option value="#type_name#">#type_name#</option><br>
        </cfoutput>    </cfselect> 
    </div>
    </cfform>
    
    <div id = "div2">
    <h2><cfinput type="datefield" name="due_date" value="" default="N/A"></h2>
    </div>
    
    <script type = "text/javascript">
    document.getElementById("div2").style.visibility = "hidden";
    function showTR() {
    if (document.myform.sel1.selectedIndex == 'Action') {
    document.getElementById("div2").style.visibility = "visible";
    
    }
    if (document.myform.sel1.selectedIndex == 'Information') {
    document.getElementById("div2").style.visibility = "hidden";
    
    }
    }
    </script>

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    476
    Thanks
    2
    Thanked 70 Times in 69 Posts
    This is really a JavaScript issue, and probably should have gone in that forum, but I'll answer your question anyway.

    #1, There's a few issues with your markup. Your </cfform> should go after your <cfinput> for the date. Remove the word 'select' from inside your <cfselect> tag. And you don't need a <br> tag after </option>.

    #2, in your script, you're trying to get the selected item from your dropdown with document.myform.sel1, but your <select> (<cfselect>) is named "type_name". Referencing a form element this way does not go by its id property, it goes by its name property. It should have been document.myform.type_name. However, really the best way to get a reference to it is with document.getElementById( "sel1" ); anyway.

    #3, you're reading your selected dropdown item incorrectly. A dropdown's selectedIndex property gives you the index of the selected item. That is, if the first item in the dropdown is selected, selectedIndex will give you 0. If the second item in the dropdown is selected, selectedIndex will give you 1, etc.

    To get the value of the selected item, you use its options array at the selected index. Ex:
    Code:
    selectTag.options[ selectTag.selectedIndex ].value;
    Here's your code corrected:
    Code:
    <cfform name="myform">
        
        <div id="div1">
            Recommended by:-
            <cfselect name="type_name" id="sel1" onchange="showTR();">
                <option>Select Type</option>
                <cfoutput query="type_name">
                    <option value="#type_name#">#type_name#</option>
                </cfoutput>
            </cfselect> 
        </div>
        
        <div id="div2">
            <h2><cfinput type="datefield" name="due_date" value="N/A"></h2>
        </div>
    
    </cfform>
    
    
    <script type="text/javascript">
        // Hide div2
        document.getElementById("div2").style.visibility = "hidden";
        
        
        function showTR() {
            var dropdown = document.getElementById( "sel1" );        // Get a reference to the dropdown (select) element
            var selectedItemValue = dropdown.options[ dropdown.selectedIndex ].value;        // use the dropdown reference to get the selected item's value
        
            var div2 = document.getElementById( "div2" );        // Get a reference to div2
        
            if( selectedItemValue == 'Action' ) {
                div2.style.visibility = "visible";    // If the selectedItemValue is 'Action', show div2
            } else {
                div2.style.visibility = "hidden";     // Otherwise, hide div2
            }
        }
    </script>

  • Users who have thanked Gjslick for this post:

    Rick7707 (03-19-2009)


  •  

    Posting Permissions

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