+ Start a Discussion
ChubbyChubby 

I want to render two fields based on change in single field with different conditions

Hi,

I have a multi select picklist field on vf page. I am rendering text field based on the value in multi picklist. Now i want to render other picklist field based on multipicklist value(with different condition). Since Iam already rendering one field i have written onchange event. now i cant use the same event and write another event for the same tag. How can I render two fields onchange of first field(two fields should be rendered with two conditions)? Please help me to achieve this scenario.

Thanks. 
Best Answer chosen by Chubby
DeveloperSudDeveloperSud
Hi Chubby,

Please refer the below code.Hope this will help.
<apex:actionFunction name="getField" action="{!getField}" rerender="theSection" immediate="true">
            <apex:param name="strField" assignTo="{!strField}" value="" />
 </apex:actionFunction>

<!-- This is the input field as u mentioned which will render input field 1 and 2 on staus change to Yes -->
<apex:inputField id="text" value="{!Account.customfield__c}" rendered="{!renderField}" 
required="true" onchange="inputStatus(this.value)"/>
<!-- render below two input fields -->
<apex:inputField value="{!Account.OtherField1__c}" rendered="{!Isrender}"/>
<apex:inputField value="{!Account.OtherField2__c}" rendered="{!Isrender}"/>

<script>
 function inputStatus(inpVal){
 if(inpVal =='Yes')
 getField(val);
 }
</script>

Controller method

public class controllerClassName{
public string strField{get;set;}
public boolean isRender{get;set;}

 public controllerClassName(){
 if(strField !=null || strField !='')
 isRender=true;
 }



 

All Answers

DeveloperSudDeveloperSud
Hi Chubby,

This is achievable using single onchange event only. Create two separate Javascript functions for your requirement and call those two functions from the onchange event. you can call like onchange="function1(),function2()"
ChubbyChubby
Hi @DeveloperSud,
Thanks for your response. Is it achievable without javascript?
DeveloperSudDeveloperSud
Hi Chubby,
Use javascript .This is the best option. Please mark this as solved if the answer is helpful.
 
ChubbyChubby
Hi 
I am not familiar with scripting . could someone pls help me what to write in javascript and pass to controller method. I tried the below code but was stuck in javascript.
Account.customfield__c have values Yes,No, Other. If this field contains Yes i want to render other input field. I tried writing below but it doesn't rendering anything.

VF Page

<apex:actionFunction name="getField" action="{!getField}" rerender="theSection" immediate="true">
            <apex:param name="strField" assignTo="{!strField}" value="" />
 </apex:actionFunction>

<apex:inputField id="text" value="{!Account.customfield__c}" rendered="{!renderField}" required="true" onchange="renderedDescription(this.value), renderInputField()"/>
<apex:inputField value="{!Account.OtherField__c}" rendered="{!Isrender}"/>

function renderInputField(){

}

Controller method

public void getField()
    {
        if(Account.Field__c == 'Yes'){
        Isrender = true;
        }
       else{
        Isrender = false;
        }
    }
DeveloperSudDeveloperSud
Hi Chubby,

Please refer the below code.Hope this will help.
<apex:actionFunction name="getField" action="{!getField}" rerender="theSection" immediate="true">
            <apex:param name="strField" assignTo="{!strField}" value="" />
 </apex:actionFunction>

<!-- This is the input field as u mentioned which will render input field 1 and 2 on staus change to Yes -->
<apex:inputField id="text" value="{!Account.customfield__c}" rendered="{!renderField}" 
required="true" onchange="inputStatus(this.value)"/>
<!-- render below two input fields -->
<apex:inputField value="{!Account.OtherField1__c}" rendered="{!Isrender}"/>
<apex:inputField value="{!Account.OtherField2__c}" rendered="{!Isrender}"/>

<script>
 function inputStatus(inpVal){
 if(inpVal =='Yes')
 getField(val);
 }
</script>

Controller method

public class controllerClassName{
public string strField{get;set;}
public boolean isRender{get;set;}

 public controllerClassName(){
 if(strField !=null || strField !='')
 isRender=true;
 }



 
This was selected as the best answer
ChubbyChubby
Hi @DeveloperSud,

Thank you so much for your response!

In your code you are calling single event and javascript but in my case i need to write two javascipt functions and call both in single onchange event.
There is javascript written already to render the Field1. I need to render field 2 again Onchange of Account.customfield__c without breaking the existing Field1 render functionality. That is why i am finding difficulty. I tried different ways but nothing workedout.

Thanks.
DeveloperSudDeveloperSud
Hi Chubby,

This is actually simple. Refer the same code and in the input field  add this onchange="function1(),inputStatus(this.value)" (I am considering function1 as your exsisting javascript code which is rending field 1 ).Please do the changes accordingly and let us know if this meeting your requirement.

 
ChubbyChubby
Hi @DeveloperSud,

I followed the way you suggested. In this case the Field1 also not redered. In my exiting code developer written onchange="function1(this.value);" If i am adding another function with comma separated like onchange="function1(this.value),inputStatus(this.value);" this breaking the functionality. I am not sure what the semicolon will do here.
DeveloperSudDeveloperSud
Hi Chubby.

If want to do with ; then use onchange="function1();function2();" .If after doing this function1 is  not working but the second function is working that means some logic is missing for function1.Try this and let me know.
ChubbyChubby
Hi DeveloperSud,

Thanks a lot for your help!
After many trials i am able to achieve it. Now I am not able to render the field until i valued all the mandatory fields present in the page, even using immediate=true in action function. Could you pls suggest on this?

Thanks.