Show/Hide from selection in drop-down

Rick7707 · 03-09-2009, 05:02 PM

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>

Gjslick · 03-10-2009, 07:12 AM

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>