Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
joseph keuler 1joseph keuler 1 

Hide label of inputfield in visualforce page using jQuery

I can get the visualforce page to hide the input field but I'm unsure how to hide the associated label. How can I hide the label as well?
  
<apex:pageBlockSection id="yearInfoPageBlock" title="Fiscal Year Information">

    <apex:inputField value="{!Fiscal_Year__c.name}" onclick="test();"/>
    <apex:inputField value="{!Fiscal_Year__c.Is_Current__c}" id="isCurrent"/>

</apex:pageBlockSection>

<apex:includeScript value="{! $Resource.jQuery }"/>
    <script type="text/javascript">
        function test(){
            $('[id$="isCurrent"]').hide();

            $('[id$="isCurrent"]').hide();
        }
    </script>
Best Answer chosen by joseph keuler 1
Arun KumarArun Kumar
Hi,

No, it's not possible if you can have a look the HTML which will generate in the backend is below where "pgBlkSecItemRating" will apppend to "txtRating" ID 
<tr style="display: table-row;">
	<th class="labelCol vfLabelColTextWrap  last " scope="row">
	Rating:
	</th>
	<td class="data2Col  last ">
		<select id="page:form:pgBlk:pgBlkSec:pgBlkSecItemRating:txtRating" name="page:form:pgBlk:pgBlkSec:pgBlkSecItemRating:txtRating">
			<option value="">--None--</option><option value="Hot">Hot</option>
			<option value="Warm">Warm</option>
			<option value="Cold">Cold</option>
		</select>
	</td>
</tr>
Please let me know if the helps.

As a common practice, if your question is answered, please choose 1 best answer.
Additionaly you can give every answer a thumb up if that answer is helpful to you.

Thanks,
Arun
 

All Answers

Arun KumarArun Kumar
Hi Joseph,

Your code seems fine, but you can take the help form the below examople 
<apex:page id="page" standardController="Lead">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(
            function(){
                hideRating('initial');
            }
        );
        
        function hideRating(scope){
            if(scope=='initial')
                jQuery('[id$=txtRating]')
                        .parent()
                        .parent()
                        .hide();
            else{
                if(jQuery('[id$=txtIndsutry]').val()=='Technology'){
                    jQuery('[id$=txtRating]')
                            .parent()
                            .parent()
                            .show();
                }
                else{
                    jQuery('[id$=txtRating]')
                            .parent()
                            .parent()
                            .hide();                
                }
            }
        }
    </script>
    <apex:form id="form">
        <apex:sectionHeader title="Lead Edit" subtitle="New Lead"/>
        <apex:pageBlock id="pgBlk" title="Lead Edit" mode="edit">
            <apex:pageBlockSection id="pgBlkSec" title="Lead Information" columns="1">
                <apex:pageBlockSectionItem id="pgBlkSecItemIndustry">
                    Industry:
                    <apex:inputField 
                        id="txtIndsutry" 
                        value="{!Lead.Industry}" 
                        onchange="hideRating()"/>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem id="pgBlkSecItemRating">
                    Rating:
                    <apex:inputField id="txtRating" value="{!Lead.Rating}"/>
                </apex:pageBlockSectionItem>                
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Thanks,
Arun
joseph keuler 1joseph keuler 1
Is it possible to hide the pgBlkSecItemRating in your example?  I'm having issues hiding a PageBlockSectionItem to include hiding the label
  
<apex:inputField value="{!Fiscal_Year__c.name}" onclick="test();"/>
<apex:pageBlockSectionItem id="isCurrentQ">
                        <apex:outputLabel value="is Current" for="isCurrent"/>
                        <apex:inputField value="{!Fiscal_Year__c.Is_Current__c}" id="isCurrent"/>
                    </apex:pageBlockSectionItem>
                        
            	</apex:pageBlockSection>
            </apex:pageblock>
                       
    	</apex:form>
    
    <apex:includeScript value="{! $Resource.jQuery }"/>
    <script type="text/javascript">
    	function test(){
            $('[id$="isCurrentQ"]').hide();
            
         }
    </script>

 
Arun KumarArun Kumar
Hi,

No, it's not possible if you can have a look the HTML which will generate in the backend is below where "pgBlkSecItemRating" will apppend to "txtRating" ID 
<tr style="display: table-row;">
	<th class="labelCol vfLabelColTextWrap  last " scope="row">
	Rating:
	</th>
	<td class="data2Col  last ">
		<select id="page:form:pgBlk:pgBlkSec:pgBlkSecItemRating:txtRating" name="page:form:pgBlk:pgBlkSec:pgBlkSecItemRating:txtRating">
			<option value="">--None--</option><option value="Hot">Hot</option>
			<option value="Warm">Warm</option>
			<option value="Cold">Cold</option>
		</select>
	</td>
</tr>
Please let me know if the helps.

As a common practice, if your question is answered, please choose 1 best answer.
Additionaly you can give every answer a thumb up if that answer is helpful to you.

Thanks,
Arun
 
This was selected as the best answer
joseph keuler 1joseph keuler 1
perfect explaination.