Highlighted

Show or hide form fields based on cfselect selection

Participant ,
Oct 06, 2014

Copy link to clipboard

Copied

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

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>

Views

2.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Show or hide form fields based on cfselect selection

Participant ,
Oct 06, 2014

Copy link to clipboard

Copied

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

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>

Views

2.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 06, 2014 0
Most Valuable Participant ,
Oct 06, 2014

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2014 1
Participant ,
Oct 07, 2014

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2014 0
BKBK LATEST
Adobe Community Professional ,
Oct 08, 2014

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2014 0