+ Start a Discussion
David OvellaDavid Ovella 

​How to make appear a field depending of the value of a picklist while you creating it?

Hello, can anyone help me please.
I'm looking for a code that when I change a value from the picklist in the same time it will appear a field on the vfpage without saving yet.
I created a vfpage that has 3 picklist with field dependencies.
and I want to know if :
For example:
If the picklist Series = 001-001
the field #Pre_Impreso_001_001__c has to appear on the vfpage and
the field #Pre_Impreso_002_001__c has to desappear
and
If the picklist Series = 001-002
the field #Pre_Impreso_001_001__c has to desappear of the vfpage and
the field #Pre_Impreso_002_001__c has to appear

Is it posible to do that?

User-added image

<apex:page controller="PruebaController" tabStyle="Pre_Factura__c">
<apex:sectionHeader title="Paso 5 de 5" subtitle="Factura"/>
<apex:form >
    <apex:pageBlock mode="edit" title="Paso 5 de 5">
        <apex:pageBlockButtons location="bottom" >
               <apex:commandButton action="{!PPagina4}" value="Anterior"/>
               <apex:commandButton action="{!PPagina6}" value="Siguiente"/>
                <apex:commandButton action="{!cancel}" value="Cancel" onclick="return confirmCancel()" immediate="true"/>
       </apex:pageBlockButtons>
      <apex:pageBlockSection title="Información Basica" columns="1">
               <apex:inputField value="{!factura.Sucursal__c}"/>
               <apex:inputField value="{!factura.Caja__c}"/>
                <apex:inputField value="{!factura.Serie__c}"/>
         </apex:pageBlockSection>
         <apex:pageBlockSection title="Confirmar Factura" columns="1">
                 <apex:inputField value="{!factura.Fecha__c}"/>
                 <apex:inputField value="{!factura.Pre_impreso_001_001__c}"/>
                 <apex:inputField value="{!factura.Pre_impreso_002_001__c}"/>
                 <apex:inputField value="{!factura.Esta_seguro__c}"/>
      </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Best Answer chosen by David Ovella
Swayam  AroraSwayam Arora
<apex:page controller="PruebaController" tabStyle="Pre_Factura__c" id="myPage">
<apex:sectionHeader title="Paso 5 de 5" subtitle="Factura"/>
<apex:form id="myForm">
    <apex:pageBlock mode="edit" title="Paso 5 de 5" id="myPageBlock">
        <apex:pageBlockButtons location="bottom" >
               <apex:commandButton action="{!PPagina4}" value="Anterior"/>
               <apex:commandButton action="{!PPagina6}" value="Siguiente"/>
                <apex:commandButton action="{!cancel}" value="Cancel" onclick="return confirmCancel()" immediate="true"/>
       </apex:pageBlockButtons>
      <apex:pageBlockSection title="Información Basica" columns="1">
               <apex:inputField value="{!factura.Sucursal__c}"/>
               <apex:inputField value="{!factura.Caja__c}"/>
                <apex:inputField value="{!factura.Serie__c}" onChange="hideShowFields(this.value);"/>
         </apex:pageBlockSection>
         <apex:pageBlockSection title="Confirmar Factura" columns="1" id="myPageBlockSection">
                 <apex:inputField value="{!factura.Fecha__c}"/>
                 <apex:inputField value="{!factura.Pre_impreso_001_001__c}" id="field001" style="display:none"/>
                 <apex:inputField value="{!factura.Pre_impreso_002_001__c}" id="field002" style="display:none"/>
                 <apex:inputField value="{!factura.Esta_seguro__c}"/>
      </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
<script>
 function hideShowFields(val) {  
    document.getElementById("myPage:myForm:myPageBlock:myPageBlockSection:field001").style.display = 'none';
    document.getElementById("myPage:myForm:myPageBlock:myPageBlockSection:field002").style.display = 'none';
    if(val == "001-001") {
        document.getElementById("myPage:myForm:myPageBlock:myPageBlockSection:field001").style.display = 'block';
    } else if(val == "002-001") {
        document.getElementById("myPage:myForm:myPageBlock:myPageBlockSection:field002").style.display = 'block';
    }
}
</script>

</apex:page>

All Answers

Swayam  AroraSwayam Arora
<apex:page controller="PruebaController" tabStyle="Pre_Factura__c" id="myPage">
<apex:sectionHeader title="Paso 5 de 5" subtitle="Factura"/>
<apex:form id="myForm">
    <apex:pageBlock mode="edit" title="Paso 5 de 5" id="myPageBlock">
        <apex:pageBlockButtons location="bottom" >
               <apex:commandButton action="{!PPagina4}" value="Anterior"/>
               <apex:commandButton action="{!PPagina6}" value="Siguiente"/>
                <apex:commandButton action="{!cancel}" value="Cancel" onclick="return confirmCancel()" immediate="true"/>
       </apex:pageBlockButtons>
      <apex:pageBlockSection title="Información Basica" columns="1">
               <apex:inputField value="{!factura.Sucursal__c}"/>
               <apex:inputField value="{!factura.Caja__c}"/>
                <apex:inputField value="{!factura.Serie__c}" onChange="hideShowFields(this.value);"/>
         </apex:pageBlockSection>
         <apex:pageBlockSection title="Confirmar Factura" columns="1" id="myPageBlockSection">
                 <apex:inputField value="{!factura.Fecha__c}"/>
                 <apex:inputField value="{!factura.Pre_impreso_001_001__c}" id="field001" style="display:none"/>
                 <apex:inputField value="{!factura.Pre_impreso_002_001__c}" id="field002" style="display:none"/>
                 <apex:inputField value="{!factura.Esta_seguro__c}"/>
      </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
<script>
 function hideShowFields(val) {  
    document.getElementById("myPage:myForm:myPageBlock:myPageBlockSection:field001").style.display = 'none';
    document.getElementById("myPage:myForm:myPageBlock:myPageBlockSection:field002").style.display = 'none';
    if(val == "001-001") {
        document.getElementById("myPage:myForm:myPageBlock:myPageBlockSection:field001").style.display = 'block';
    } else if(val == "002-001") {
        document.getElementById("myPage:myForm:myPageBlock:myPageBlockSection:field002").style.display = 'block';
    }
}
</script>

</apex:page>
This was selected as the best answer
Swayam  AroraSwayam Arora
If you find the above answer useful then please mark it as Best Answer. And let me know if you need any further help.
David OvellaDavid Ovella
thanks so much Swayam,
it worked perfectly
Swayam  AroraSwayam Arora
Welcome David :)