How to display only few choices of two fields when another filed value is selected

Lucky18
Kilo Contributor

Lets take an example like I hav 3 fields like country,state,city

If country is selected as india,then the other two field choices should show only India states in State field and cities in City field.have done something in client script but still notihg is changing.

Please let me know where I went wrong

heres the code I have tried it for country and state fields;

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading || newValue === '') {
return;
}


var a=g_form.getValue('u_country');

if(a=='India')
{

g_form.addOption('u_statte','ap','Ap');
g_form.addOption('u_statte','karnataka','Karnataka');
g_form.removeOption('u_statte','california','California');
g_form.removeOption('u_statte','washington','Washington');
g_form.removeOption('u_statte','victoria','Victoria');
g_form.removeOption('u_statte','south aus','South Aus');

}
}

Thanks in Advance!

1 ACCEPTED SOLUTION

asifnoor
Kilo Patron

Hi,

Technically for such things you can use dependent field but this works only when the choices are NOT static.

Your client script looks fine. 

Also, since you have written onchange on country field, you can directly access newValue variable which will give the latest selection of the country field. 

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading || newValue === '') {
return;
}

//var a=g_form.getValue('u_country'); 
g_form.addInfoMessage("Value is "+newValue);

if(newValue=='India')
{
g_form.addInfoMessage("Entered into if condition");
g_form.addOption('u_statte','ap','Ap');
g_form.addOption('u_statte','karnataka','Karnataka');
g_form.removeOption('u_statte','california','California');
g_form.removeOption('u_statte','washington','Washington');
g_form.removeOption('u_statte','victoria','Victoria');
g_form.removeOption('u_statte','south aus','South Aus');

} 
}

Also verify if the field name u_statte is correct or not. 

View solution in original post

20 REPLIES 20

dwilborn
Tera Contributor

Although this post is marked as answered I found it was not the complete solution and it did seem the issue wasn't actually resolved(reading down through the comments).

The problem seems to be that the list choices are not loaded by the time the onChange script runs.  Therefore it cannot remove something it doesn't see as being present.

In order to rectify this I have used the following onChange client script in my environment

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
	if (isLoading || newValue === '') {
		return;
	}
	
	g_form.addInfoMessage("Value is "+newValue);
	
	if(newValue);
		
	setTimeout(wait, 250);
	
	function wait(){
		
		if(newValue == 'in_use'){
			
			g_form.addInfoMessage("Entered into if condition");
			
			g_form.removeOption('hardware_substatus', 'conference_room_device');
			g_form.removeOption('hardware_substatus', 'lobby_device');
			g_form.removeOption('hardware_substatus', 'kiosk_device');
		}
	}
	
}

Note that 250 is an arbitrary number of milliseconds and is likely not the ideal solution to set the script to wait.  Since I'm just getting started I am unsure of what a better method would be for waiting until the choices are populated.  Any advise on that would be appreciated.

In case you were wondering.  The reason using a fixed time to wait is not ideal is because it depends on your client querying the server and then populating the appropriate choices before your time is up.  If you have a network hiccup the fixed amount of time may not be enough.  I'd venture that a business rule or data policy might be more effective but I'm still working my way up to server side scripting.

 

Daniel