Show or hide form fields based on cfselect selection

[biene22]

Hi,

I'm using ColdFusion 9 and

I want to show/hide a form field type=checkbox if an assigned value is selected in a dropdown list, but it doesn't work.

I use a javascript function.

My question is: Are there better possibilities with ColdFusion to do this or is Javascript the best solution???

Here is my code:

<script type="text/javascript">

    function show(){

        var select = document.getElementById('dropdownlist').selectedIndex;      

        if(select == 1) document.getElementById('area').style.display = "block";

        else document.getElementById('area').style.display = "none";       

    }

</script>

....

<cfquery name="select_list">

select * from table

</cfquery>

<cfform name ="form">

<cfselect name="dropdownlist" onChange="show();">

    <option value="0">please select</option>

    <cfloop query="select_select_list">

     <option value="#select_select_list.id#">#select_list.name#</option>

    </cfloop>       

    </cfselect>

<div id="area" style="display:none">

         <cfloop query="select_list" > 

         <tr style="display:none">

      <td>    

           <cfinput name="gsu"  type="checkbox"  value="#select_list.id#"> #select_list.name#

          </td>

     </tr>

         </cfloop> 

     </div>

</cfform>

Thank you and best regards!

Claudia

[Carl Von Stetten]

Definitely has to be done in JavaScript as responding to user input is an entirely client-side interaction.  Just a note: using CFFORM/CFINPUT/CFSELECT seems entirely unnecessary here since you are not using any of ColdFusion's form features - just use plain FORM/INPUT/SELECT tags.

What is the point of having a select pull-down and then using the same values to build a list of checkboxes, which only appears if the first option on the pull-down is chosen?  Would a SELECT tag allowing multiple selections be more appropriate?

You have <tr> and <td> nested in a <div>, but no parent <table> which seems odd.  Also, why hide the <tr> if you are already hiding the <div>?

-Carl V.

[biene22 · Accepted solution]

Okay, thank you for your answer.

I changed the javascript function and replaced the <div> with the <table> tag. Then it works.

Here is an extract of my code:

<script type="text/javascript">

    function show(){

        var select = document.getElementById('dropdownlist'); 

        var strUser = select.options[select.selectedIndex].value;    

        if(strUser== 1) document.getElementById('area').style.display = "block";

        else document.getElementById('area').style.display = "none";       

    }

</script>

<cfquery name="select_list">

select * from table

</cfquery>

<cfform name ="form">

<table id="area" style="display:none">

         <cfloop query="select_list" > 

         <tr">

      <td>    

           <cfinput name="gsu"  type="checkbox"  value="#select_list.id#"> #select_list.name#

          </td>

     </tr>

         </cfloop> 

     </table>

</cfform>

[BKBK]

Glad to hear it now works. Please mark the correct answer. It will help others spot it.