Apex Code Development You need to sign in to do that
Don't have an account?
krish99 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.
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.
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
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
<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.
Regards,
- Harsha
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.
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