You can use rendered
attribute of the apex:inputField
. So if the Object__c.Field1__c = value_1 it will be not shown at all:
<apex:actionFunction name="showHideField2" reRender="mySection"/>
<apex:form>
<apex:pageBlockSection title="Informations" id="mySection">
<apex:inputField value="{!Object__c.Field1__c}" onchange="showHideField2();" id="inField1"/>
<apex:inputField value="{!Object__c.Field2__c}" id="inField2" rendered="{!Object__c.Field1__c != 'value_1'}"/>
</apex:form>
The apex:actionFunction
works like a normal javascript function but can do reRender of the visualforce components.
Or you can use a jQuery solution for that as well. You will need to define an label for the outputField and hide that label together with a field:
function selectService (){
if($jquery('[id$=inField1]').val() == "value_1"){
$jquery('[id$=inField2]').hide();
$jquery('[id$=inField2Label]').hide();
}
else{
$jquery('[id$=inField2]').show();
$jquery('[id$=inField2Label]').show();
}
}
<apex:form>
<apex:pageBlockSection title="Informations">
<apex:inputField value="{!Object__c.Field1__c}" onchange="selectService();" id="inField1"/>
<apex:pageBlockSectionItem>
<apex:outputLabel value="{!$ObjectType.Object__c.fields.Field2__c.label}" id="inField2Label"/>
<apex:inputField value="{!Object__c.Field2__c}" id="inField2"/>
<apex:pageBlockSectionItem>
</apex:form>
hide()
function of the jQuery? Like$jquery('[id$=inField2]').hide();