+ Start a Discussion
Sindhu AmbarkarSindhu Ambarkar 

Changing picklist value and getting displayed in visualforce page

Hi,
Based on change in the picklist value the value should be displayed in outputtext in visualforce page.Can someone help with the sample code for the actionsupport or actionfunction for onchange event.

Thanks & Regards,
Sindhu Ambarkar.
Martijn SchwarzerMartijn Schwarzer
Hi Sindhu,

Here's an example using the Type field of the Account object:
 
<apex:inputField value="{!Account.Type}">
    <apex:actionSupport event="onchange" rerender="outputPanel1" />
</apex:inputField>

<apex:outputPanel id="outputPanel1">
    <apex:outputText value="{!Account.Type}" />
</apex:outputPanel>

Hope this helps!

Happy coding!

Best regards,
Martijn Schwärzer
 
Rajneesh Ranjan 23Rajneesh Ranjan 23
Here is two examples what I tried, and hope this would work for you.

1. Change InputText/OutputText field based on another Input Field(Onchange)
Example-1
VF Page
<apex:page id="pg">
    <apex:form id="fm">
        <apex:pageblock id="pb1">
       
            <apex:pageblockSection id="pbs1">
                Input Text: <apex:inputtext id="intext1" onchange="show()" />
            </apex:pageblockSection>
           
            <apex:pageblockSection id="pbs2">
                Input Text field (will be automatically changed): <apex:inputtext id="intext2"/>
                Output Text (will be automatically changed): <apex:outputText id="outtext1"/>
            </apex:pageblockSection>
           
        </apex:pageblock>
    </apex:form>
   
    <script>
        function show(){
            var text = document.getElementById('{!$Component.pg.fm.pb1.pbs1.intext1}').value;
            document.getElementById('pg:fm:pb1:pbs2:intext2').value = text;
            document.getElementById('pg:fm:pb1:pbs2:outtext1').innerHTML=text;
        }
    </script>
   
</apex:page>

2. Change InputText/OutputText field based on another Picklist(Onchange)
Example-2
VF Page
<apex:page controller="MyPickListClass" id="pg">
    <apex:form id="fm">
        <apex:pageblock id="pb1">
       
            <apex:pageblockSection id="pbs1">
                Input Pick-List:
                <apex:selectList size="1" id="intext1" value="{!statusOptions}" onchange="show()" >
                    <apex:selectOptions value="{!items}"/>
                </apex:selectList>

            </apex:pageblockSection>
           
            <apex:pageblockSection id="pbs2">
                Input Text field (will be automatically changed): <apex:inputtext id="intext2"/>
                Output Text (will be automatically changed): <apex:outputText id="outtext1"/>
            </apex:pageblockSection>
           
        </apex:pageblock>
    </apex:form>
   
    <script>
        function show(){
            var text = document.getElementById('{!$Component.pg.fm.pb1.pbs1.intext1}').value;
            document.getElementById('pg:fm:pb1:pbs2:intext2').value = text;
            document.getElementById('pg:fm:pb1:pbs2:outtext1').innerHTML=text;
        }
    </script>
   
</apex:page>

Custom Controller:
public class MyPickListClass {
    public String statusOptions { get; set; }
   
    public List<SelectOption> getItems() {

        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('Value-1','Value-1'));
        options.add(new SelectOption('Value-2','Value-2'));
        options.add(new SelectOption('Value-3','Value-3'));
        options.add(new SelectOption('Value-4','Value-4'));
       
        return options;
    }
}
Please let me know if you have any question on this.

Thanks,
Rajneesh
Sindhu AmbarkarSindhu Ambarkar
Thanks it is working fine
Rajneesh Ranjan 23Rajneesh Ranjan 23
Hi Sindhu,

If these codes really worked for you then please mark one answer as the best answer based on the usability of the code.

Thanks,
Rajneesh