Attach a common onchange function to multiple fields in an onload client script

twooton · ‎08-13-2018

I found this article on how to attach a common onchange function to multiple fields in an onload client script. I want to calculate a date field (end date) but I need to check multiple fields (start date, length of term, renewable, etc) first to ensure they have values or specific values so the calculation can be done, if it should be done.

http://www.snc-blog.com/2012/06/04/client-script-for-multiple-fields/

The problem I am running into is this. When manually changing the date value of start date, it works fine. When the datepicker is used to set the field value of start date, my onchange does not fire. Simplified code below:

function onLoad() {
try {
var start_field = g_form.getControl('starts');
start_field.onchange = calculateContractDates;
} catch (err) { }
}

function calculateContractDates() {
var renewable_value = g_form.getValue('renewable');
alert(renewable_value);
}

Any insight would be appreciated.

Mark Stanger · ‎08-13-2018

I can confirm the same thing, which means that there's likely another element in the HTML that's storing that value for a date field. In any case, this type of coding is likely to cause you some sort of issue down the road because it's dependent on ServiceNow keeping their field structure on their forms relatively consistent. It might be worth it if there were no other way, but in this case there are several. I've done something similar quite a bit in the past still requires you to have a single 'onChange' client script associated to each field you're listening to a change on, but those 'onChange' scripts just make a call to your global function so you can manage the code for all of them in one place. In order to do this, you will need 2 things.

1) An 'onLoad' client script similar to what you've shown above, but with an empty 'onLoad' function like this...

function onLoad() {
    // Blank since we're just creating a shared function for this table
}

// Shared function that can be accessed by any other client script for this table
function calculateContractDates() {
    var renewable_value = g_form.getValue('renewable');
    alert(renewable_value);
}

2) An individual 'onChange' client script to watch for each field change. Your client script would just need to call your shared function like this.

calculateContractDates();

View solution in original post

Yaraslau · ‎07-02-2019

Also if you want to make this feature in Record Producer you will need 2 things.

1) An 'onLoad' client script ...

function onLoad() {
    g_scratchpad.calculateContractDates = calculateContractDates;
}

// Shared function that can be accessed by any other client script for this table
function calculateContractDates() {
    var renewable_value = g_form.getValue('renewable');
    alert(renewable_value);
}

2) An individual 'onChange' client script to watch for each field change. Your client script would just need to call your shared function like this.

g_scratchpad.calculateContractDates();

AsharRahul · ‎01-28-2020

Hello Mark,

Thank you so much for the answer. This code work only great. I had to do minor change as change the calue of 'Isolate Script' to false.

Unfortunately the side-effect of that is the code is not running on Service Portal.

Any Idea how to get this common code working on service Portal too

Rahul Ashar

jamesmcwhinney · ‎08-29-2022

I ran into the same issue today.

This approach does not work for service portal.

Is there any workaround?

Thanks!

jamesmcwhinney · ‎08-29-2022

Found the solution in this thread here:

Reuse Client Script with Service Portal - IT Service Management - Question - ServiceNow Community

Avoiding code duplication in Catalog Client Scripts » Ruben Ferrero

The solution seems to be to do something like this in your onLoad (declare the shared function as an expression):

function onLoad() {
   //Usual onload stuff here.....
   
}
//This function is called within the various onChange methods
UpdateExtendedPrice = function(){
    //Run Shared code here!
};

I have tested this and it works on San Diego Service Portal.

ya1988bk · ‎07-17-2025

Thank you very much for this reply this helped to resolve the issue with the code not running on the Service Portal. Your solution saved me as of Yokohama release.

Also, instead of multiple onChange Client Scripts, there is now a solution to use one onLoad Client Script that tracks changes in multiple fields:

ServiceNow FastBytes ::: onChange on Multiple Fields ? ::: Coding Trickery