function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Dhananjaya BulugahamulleDhananjaya Bulugahamulle 

How to hide and show an column in VF?

User-added image
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>

 
Best Answer chosen by Dhananjaya Bulugahamulle
William TranWilliam Tran

In your function, try adding an else statement, also to disable it you need to be able to see it first :-)

See below

Thx

 
<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").style.visibility = "visible";
                document.getElementById("Hidecolumn1").style.visibility = "visible";
                document.getElementById("Hidecolumn2").style.visibility = "visible";
                document.getElementById("Hidecolumn3").style.visibility = "visible";
                document.getElementById("Hidecolumn4").style.visibility = "visible";
                document.getElementById("Hidecolumn5").style.visibility = "visible";

                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; 
            }

            else{


                document.getElementById("Hidecolumn").style.visibility = "visible";
                document.getElementById("Hidecolumn1").style.visibility = "visible";
                document.getElementById("Hidecolumn2").style.visibility = "visible";
                document.getElementById("Hidecolumn3").style.visibility = "visible";
                document.getElementById("Hidecolumn4").style.visibility = "visible";
                document.getElementById("Hidecolumn5").style.visibility = "visible";
 
		document.getElementById("Hidecolumn").disabled = false; 
                document.getElementById("Hidecolumn1").disabled = false; 
                document.getElementById("Hidecolumn2").disabled = false; 
                document.getElementById("Hidecolumn3").disabled = false; 
                document.getElementById("Hidecolumn4").disabled = false; 
                document.getElementById("Hidecolumn5").disabled = false; 

		}


        }
</script>