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
krish99krish99 

Depedent input text in visualforce page

HI,

   In Visualforce page i have 2 input texts,if i write any thing in input text1, automatically  inputtext2 comes visiable, i need picklist funcationality in-between fields in visualforce page how can i get this.


<apex:page controller="deptext">
  <apex:form >
  <apex:inputText value="{!inputValue1}" id="theTextInput1"/><br/>
  <apex:inputText value="{!inputValue2}" id="theTextInput2"/>
  </apex:form>
</apex:page>

My Apex Code

  public class deptext {

 
   public String inputValue1 {get;set;}
   public String inputValue2 {get;set;}

    public String getInputValue1() {
        return null;
    }

     public String getInputValue2() {
        return null;
    }


}

when i enter in first input text at that time input text2 be visiable how can i achieve this.
Best Answer chosen by krish99
justin_sfdcjustin_sfdc
Hi krish99,

Based on what peter provided, I had made few changes to the code so that it acts properly when you click tab; Initially it was showing you another textField but the mouse cursor was being removed from your first textbox; below is the vf page code that functions prperly
<apex:page controller="PartialPageRefreshController">

    <apex:form id="form">
        <apex:pageBlock title="User Input" id="thePageBlock">
            <apex:pageBlocksection columns="2">
            <apex:inputText value="{!inputValue1}" id="theTextInput1" label="Input 1" tabindex="1">
          
            <!-- action support allows you to add event handlers onto VF components that don't normally support them the "reRender" attribute can point to              any VF component on the page -->
            <apex:actionSupport reRender="refresh" event="onkeyup" />          
        </apex:inputText>
      
        <!-- the "rendered" attribute tells the VF page renderer whether or not to generate the HTML for this component -->
        <apex:outputPanel id="refresh">
            <apex:pageblocksection rendered="{!LEN(inputValue1)>0}">
                 <apex:inputText value="{!inputValue2}" id="theTextInput2" label="Input 2" rendered="true" tabindex="2"/>
            </apex:pageblocksection>
        </apex:outputPanel>
        </apex:pageBlocksection>   
     
        </apex:pageBlock>
    </apex:form>
</apex:page>

Hope that helped in some way!

Thanks,
justin~sfdc

All Answers

Ashish_SFDCAshish_SFDC
Hi Krish, 


See the code and the related discussion on the thread below, 

http://stackoverflow.com/questions/10015597/display-fields-based-on-selection-on-a-picklist-selection


Regards,
Ashish
Peter_sfdcPeter_sfdc
Try this in your page: 

<apex:page controller="PartialPageRefreshController">

  <!-- the id here identifies what we are going to perform the partial page refresh on -->
  <apex:form id="form">

  <apex:inputText value="{!inputValue1}" id="theTextInput1">

      <!-- action support allows you to add event handlers onto VF components that don't normally support them
      the "reRender" attribute can point to any VF component on the page -->
      <apex:actionSupport reRender="form" event="onkeyup" />

  </apex:inputText>

  <br/>

  <!-- the "rendered" attribute tells the VF page renderer whether or not to generate the HTML for this component -->
  <apex:inputText rendered="{!LEN(inputValue1)>0}" value="{!inputValue2}" id="theTextInput2"/>

  </apex:form>

</apex:page>

There are certainly other ways to do this on the client side using standard JS/CSS features. But if you want to know how this works with VF markup, this is it. Just be aware that this does make a server trip every time there is a change to field1. So while this will probably work great in a desktop browser with a good internet connection, on a mobile device on a 3g connection, you might not see optimal performance. 
harsha__charsha__c
Yes, Peter's code works well for this. But I suggest to have event="onblur" for the ActionSuppot component

Regards,
- Harsha
 
Peter_sfdcPeter_sfdc
Thanks, Harsha. The JS event handler is really up to you based on what behavior you want. 

I chose "onkeyup" so that it would reveal the second field directly upon any input being typed in the first field. To me that sounded like the best fit for the requirement in the question. 

The "onblur" event would be useful if you only want the second field to appear once the cursor has left the first field. 

But there are certainly others and playing with them isn't a bad idea. I would suggest taking a read through the JS event handler spec (http://www.w3schools.com/jsref/dom_obj_event.asp). You might also play around with these in different browsers as the implementation in each browser can be subtly different leading to user experience difficulties. 
justin_sfdcjustin_sfdc
Hi krish99,

Based on what peter provided, I had made few changes to the code so that it acts properly when you click tab; Initially it was showing you another textField but the mouse cursor was being removed from your first textbox; below is the vf page code that functions prperly
<apex:page controller="PartialPageRefreshController">

    <apex:form id="form">
        <apex:pageBlock title="User Input" id="thePageBlock">
            <apex:pageBlocksection columns="2">
            <apex:inputText value="{!inputValue1}" id="theTextInput1" label="Input 1" tabindex="1">
          
            <!-- action support allows you to add event handlers onto VF components that don't normally support them the "reRender" attribute can point to              any VF component on the page -->
            <apex:actionSupport reRender="refresh" event="onkeyup" />          
        </apex:inputText>
      
        <!-- the "rendered" attribute tells the VF page renderer whether or not to generate the HTML for this component -->
        <apex:outputPanel id="refresh">
            <apex:pageblocksection rendered="{!LEN(inputValue1)>0}">
                 <apex:inputText value="{!inputValue2}" id="theTextInput2" label="Input 2" rendered="true" tabindex="2"/>
            </apex:pageblocksection>
        </apex:outputPanel>
        </apex:pageBlocksection>   
     
        </apex:pageBlock>
    </apex:form>
</apex:page>

Hope that helped in some way!

Thanks,
justin~sfdc
This was selected as the best answer