You need to sign in to do that
Don't have an account?

How to hide and show an column in VF?
I have a Pick list called myPicklist, when user select the “Biochemical Repack” pick list values, I want to Hide the column from above table (Id = “HideColunm”), and when user select “AO Powder” I want to inactive the column. Any other values should show the column. So far I would be able to hide, but when I select another value from pick list it does nothing. Nothing will change, it will stay same. Does anybody know how to change that? Thanks
<apex:page standardController="Product_Brief__c" extensions="gibco" > <apex:form id="theForm"> <apex:pageBlock id="thePageBlock"> <apex:pageBlockSection id="thePageBlockSection"> <apex:inputField value="{!Product_Brief__c.Product_Format__c}" onchange="myPicklistChanged();" id="myPicklist"/> </apex:pageBlockSection> <table id="table_section4" align="center"> <tr> <th>QUANTITY</th> <th>UNIT SIZE FILL VOLUME</th> <th Id="Hidecolumn">LIQUID PACKAGING</th> <th>POWDER AGT PACKAGING</th> <th>TOTAL VOLUME:</th> </tr> <tr> <td><apex:inputField value="{!Product_Brief__c.Quantity1_1__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Unit_Size_Fill_Volume1_1__c}"/></td> <td Id="Hidecolumn1"><apex:inputField value="{!Product_Brief__c.Liquid_Packaging1_1__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Powder_AGT_Packaging1_1__c}" /></td> <td><apex:inputField value="{!Product_Brief__c.Total_Volume1_1__c}"/></td> </tr> <tr> <td><apex:inputField value="{!Product_Brief__c.Quantity1_2__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Unit_Size_Fill_Volume1_2__c}"/></td> <td id="Hidecolumn2"><apex:inputField value="{!Product_Brief__c.Liquid_Packaging1_2__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Powder_AGT_Packaging1_2__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Total_Volume1_2__c}"/></td> </tr> <tr> <td><apex:inputField value="{!Product_Brief__c.Quantity1_3__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Unit_Size_Fill_Volume1_3__c}"/></td> <td id="Hidecolumn3"><apex:inputField value="{!Product_Brief__c.Liquid_Packaging1_3__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Powder_AGT_Packaging1_3__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Total_Volume1_3__c}"/></td> </tr> <tr> <td><apex:inputField value="{!Product_Brief__c.Quantity1_4__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Unit_Size_Fill_Volume1_4__c}"/></td> <td id="Hidecolumn4"><apex:inputField value="{!Product_Brief__c.Liquid_Packaging1_4__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Powder_AGT_Packaging1_4__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Total_Volume1_4__c}"/></td> </tr> <tr> <td><apex:inputField value="{!Product_Brief__c.Quantity1_5__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Unit_Size_Fill_Volume1_5__c}"/></td> <td id="Hidecolumn5"><apex:inputField value="{!Product_Brief__c.Liquid_Packaging1_5__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Powder_AGT_Packaging1_5__c}"/></td> <td><apex:inputField value="{!Product_Brief__c.Total_Volume1_5__c}"/></td> </tr> </table> </apex:pageBlock> </apex:form> </apex:page> <script> function myPicklistChanged(){ var myPicklistElement = document.getElementById('{!$Component.theForm.thePageBlock.thePageBlockSection.myPicklist}'); var myPicklistValue = myPicklistElement.options[myPicklistElement.selectedIndex].value; if (myPicklistValue == 'Biochemical Repack'){ document.getElementById("Hidecolumn").style.visibility = "hidden"; document.getElementById("Hidecolumn1").style.visibility = "hidden"; document.getElementById("Hidecolumn2").style.visibility = "hidden"; document.getElementById("Hidecolumn3").style.visibility = "hidden"; document.getElementById("Hidecolumn4").style.visibility = "hidden"; document.getElementById("Hidecolumn5").style.visibility = "hidden"; } else if (myPicklistValue == 'AO Powder'){ document.getElementById("Hidecolumn").disabled = true; document.getElementById("Hidecolumn1").disabled = true; document.getElementById("Hidecolumn2").disabled = true; document.getElementById("Hidecolumn3").disabled = true; document.getElementById("Hidecolumn4").disabled = true; document.getElementById("Hidecolumn5").disabled = true; } } </script>
In your function, try adding an else statement, also to disable it you need to be able to see it first :-)
See below
Thx