Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
PreyankaPreyanka 

onchange event not working for dependent picklist

Hi All,

I am facing problem with onchange event of <apex:inputfield> that actually calls <apex:actionFunction>

The problem is I have a depenedent picklist. When I choose value in controlling picklist the dependent picklist will enabled and values will be rendered. When there is more than one value in the dependent picklist there is no problem with the onchange event but when there is only one value, as per dependent picklist behaviour, that value was selected by default at that time onchange event is not working. 

There is one solution to use javascript and add a dummy value like --select-- in the picklist but is there any other option, hence user do not have to select the dependent picklist value if there is only one value.
LBKLBK
Hi Preyanka,

You can set the selectedIndex to -1 (in Javascript), so that the value will not be selected by default.

Once you select it manually, your OnChange event will be fired.

Here is the sample syntax. 
yourSelectElement.selectedIndex = -1
You may want to add this code to the Onchange event of the controller field.

Let me know if this helps.
 
PreyankaPreyanka
Hi LBK,

Actually I have three field A, B, C

And they are dependent like below
 
If I select A the value comes in field B and if I selected something in B then C will be enable and value will be populated. A and B field is working fine but when there is only one value in field C it does not fire the onchange event abc() of field C.

<apex:inputField value="{!myobj__c.A__c}" required="true" />
<apex:inputField value="{!myobj__c.B__c}" required="true" />
<apex:inputfield value="{!myobj__c.C__c}" required="true" onchange="abc()" />
<apex:actionFunction name="abc" action="{!callCtr}" rerender="block1"/>

As suggested I have write a javascript onchange function on field B but after doing that C field is disable and the value is not populated.

It will be helpful if you let me know the full code of javascript.
LBKLBK
I suggest you to reset both B and C onChange of A.

And, reset C onchange of B.

Your code will look like this. 
<script language="javascript"> 
	function resetLists(parent)
	{
		if(parent == 'A'){
			var objPickListB = document.getElementById('j_id0:j_id2:j_id3:j_id4:j_id5:List_B');
			objPickListB.selectedIndex = -1;	
		}
		
		var objPickListC = document.getElementById('j_id0:j_id2:j_id3:j_id4:j_id5:List_C'); 
		objPickListC.selectedIndex = -1;
	}
</script>

<apex:inputField value="{!myobj__c.A__c}" required="true" onchange="resetLists('A')" />
<apex:inputField value="{!myobj__c.B__c}" required="true" onchange="resetLists('B')"  />
<apex:inputfield value="{!myobj__c.C__c}" required="true" onchange="abc()" />
<apex:actionFunction name="abc" action="{!callCtr}" rerender="block1"/>
You can fetch the IDs (used in getElementById in the JS function) of these pick lists using "Inspect Element" option in the browser.

Hope this helps.
PreyankaPreyanka
I have reset both B and C but it does not populate the --None-- value in C. It directly populate the single value which is the default behavior and also does not fire the onchange event of C field. 

Is there any other way to do this.
LBKLBK
resetLists() method in the above code should reset both B and C, if it is called on change of A and reset C if it is called on change of B.

Was that not working for you?
 
PreyankaPreyanka
No that is not working. The method is invoked on onchange event of A and onchange of B, I have checked that using javascript alert. But it does not reset the value of C to --None--, instead it select the single value automatically.