OnChange script not working as intended

Staxed
Giga Guru

I'm having a difficult time getting this script to do what I want it to do.  It should be looking at the Division (newValue) and then depending on that, clear all options in location and populate with a specific set for each Division.

If I use the script as written below, whenever the form loads, it changes the location field to whatever the first option in the list is.

If I change the first if in the function to (isLoading || newValue === ' '), it then works as intended and doesn't change the location field itself, but it also shows every location for every division instead of just the appropriate locations.  I'm not sure what I'm missing here.

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

	if(newValue=='Charleston')
	{
		g_form.clearOptions('u_hr_location', 'Location');
		g_form.addOption('u_hr_location','Charleston','Charleston');
		g_form.addOption('u_hr_location','Charleston MCP','Charleston MCP');
	}
	
	else if(newValue=='Florence')
	{
		g_form.clearOptions('u_hr_location', 'Location');
		g_form.addOption('u_hr_location','Florence','Florence');
		g_form.addOption('u_hr_location','Florence MCP','Florence MCP');
		g_form.addOption('u_hr_location','Marion','Marion');
		g_form.addOption('u_hr_location','Marion MCP','Marion MCP');
	}
	
	else if(newValue=='Lancaster')
	{
		g_form.clearOptions('u_hr_location', 'Location');
		g_form.addOption('u_hr_location','Chester','Chester');
		g_form.addOption('u_hr_location','Lancaster','Lancaster');
		g_form.addOption('u_hr_location','Lancaster MCP','Lancaster MCP');
	}
	
	else if(newValue=='Midlands')
	{
		g_form.clearOptions('u_hr_location', 'Location');
		g_form.addOption('u_hr_location','Columbia','Columbia');
		g_form.addOption('u_hr_location','Kershaw','Kershaw');
		g_form.addOption('u_hr_location','Midlands MCP','Midlands MCP');
	}
   
}
1 ACCEPTED SOLUTION

ProcessMatters
Giga Guru

You will need an onLoad script to perform essentially the same functionality, as onChange will only fire when the value changes.

View solution in original post

20 REPLIES 20

I don't think this option will work for me, as the field that I'm trying to do this for is a reference field to another table that I don't want to edit, which is why I was trying to do it through the script method.  I'll take a look at it and see if I can do it though.

The current reference field isn't a choice type, just a string type with a choice list.  I'm coming in after someone else that did no documentation on how they set it up so I'm not sure what else it would affect if I messed with that table itself.

Hey,

 

Please help me with the screenshots of the two fields you are trying to achieve this for, that will make it easier to understand.

 

Regards,

Shreya

shloke04
Kilo Patron

HI @Staxed 

Can you let me know the use case and couple of screenshot of your form on what you want to achieve and will assist you in right direction with the script needed.

Just looking at the code will not allow me to approach it correctly.

Please provide the form screenshot and use case and will assist further.

Regards,

Shloke

Hope this helps. Please mark the answer as correct/helpful based on impact.

Regards,
Shloke

Edit: I finally figured it out, not sure why I didn't think of it in the first place.  I'm leaving my post below just in case anyone is curious, but I changed the onLoad script to remove options instead of clearing and adding new ones.  This solved my issue.

Certainly, I'll explain below what I have right now, what I expect it to do, and what it is now doing.

I added an onLoad script at the recommendation of someone else in this thread.

OnLoad:

function onLoad() {
	
	var Division = g_form.getValue('u_division');
	
	if(Division=='Charleston')
	{
		g_form.clearOptions('u_hr_location', 'Location');
		g_form.addOption('u_hr_location','Charleston','Charleston');
		g_form.addOption('u_hr_location','Charleston MCP','Charleston MCP');
	}
	
	else if(Division=='Florence')
	{
		g_form.clearOptions('u_hr_location', 'Location');
		g_form.addOption('u_hr_location','Florence','Florence');
		g_form.addOption('u_hr_location','Florence MCP','Florence MCP');
		g_form.addOption('u_hr_location','Marion','Marion');
		g_form.addOption('u_hr_location','Marion MCP','Marion MCP');
	}
	
	else if(Division=='Lancaster')
	{
		g_form.clearOptions('u_hr_location', 'Location');
		g_form.addOption('u_hr_location','Chester','Chester');
		g_form.addOption('u_hr_location','Lancaster','Lancaster');
		g_form.addOption('u_hr_location','Lancaster MCP','Lancaster MCP');
	}
	
	else if(Division=='Midlands')
	{
		g_form.clearOptions('u_hr_location', 'Location');
		g_form.addOption('u_hr_location','Columbia','Columbia');
		g_form.addOption('u_hr_location','Kershaw','Kershaw');
		g_form.addOption('u_hr_location','Midlands MCP','Midlands MCP');
	}
}

onChange:

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

	if(newValue=='Charleston')
	{
		g_form.clearOptions('u_hr_location', 'Location');
		g_form.addOption('u_hr_location','Charleston','Charleston');
		g_form.addOption('u_hr_location','Charleston MCP','Charleston MCP');
	}
	
	else if(newValue=='Florence')
	{
		g_form.clearOptions('u_hr_location', 'Location');
		g_form.addOption('u_hr_location','Florence','Florence');
		g_form.addOption('u_hr_location','Florence MCP','Florence MCP');
		g_form.addOption('u_hr_location','Marion','Marion');
		g_form.addOption('u_hr_location','Marion MCP','Marion MCP');
	}
	
	else if(newValue=='Lancaster')
	{
		g_form.clearOptions('u_hr_location', 'Location');
		g_form.addOption('u_hr_location','Chester','Chester');
		g_form.addOption('u_hr_location','Lancaster','Lancaster');
		g_form.addOption('u_hr_location','Lancaster MCP','Lancaster MCP');
	}
	
	else if(newValue=='Midlands')
	{
		g_form.clearOptions('u_hr_location', 'Location');
		g_form.addOption('u_hr_location','Columbia','Columbia');
		g_form.addOption('u_hr_location','Kershaw','Kershaw');
		g_form.addOption('u_hr_location','Midlands MCP','Midlands MCP');
	}
   
}

The Division and Location fields are on a Catalog Item, when someone fills out that item, it maps their selection with the Division and Location fields.  It is only when I get into the form view in the backend that this error starts happening.

Right now, when the form loads, no matter what the selected location is, it changes it to the first value in the choice list.  So for example, if someone selected Florence > Florence MCP...when I load the form I can see Florence MCP for a split second and then it changes to Charleston.

Example:

Someone has filled out the catalog item choosing Florence as Division and Florence MCP as location.

When I load the form, I see this for about half a second:

find_real_file.png

then a split second later, it updates to this:

find_real_file.png

This is the result I'm getting now, after creating the nnLoad script. The problem of all locations showing in the list has been resolved, but now I have this issue.

I'm assuming this is happening because the onLoad script is clearing all the options and setting new ones, but I'm not sure entirely sure what to do to resolve that issue, while also making sure the options are correct.

Hitoshi Ozawa
Giga Sage
Giga Sage

From the description on updating department list based on selection on division, Cascading Filter seems like what is needed.

https://docs.servicenow.com/bundle/quebec-now-intelligence/page/use/dashboards/task/create-cascading...