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

Tim Elery · ‎08-16-2018

I believe you can avoid the need for individual client scripts if you set the onchange event in the onload script. The only requirement here is to uncheck the "Isolate script" check box on the onLoad script form. This property is not visible in the form by default.

With this field unchecked you can access the dom in the script. With dom access you can set the onChange function for any field in the form. This code has been verified on London (glide-london-06-27-2018__patch0-07-11-2018).

function onLoad() {
   //Prefix for the form table. Update accordingly
   var prefix = 'cmdb_ci_win_server.';
	
   //Loop through all form fields and set the common onChange function
   for(var x = 0; x < g_form.elements.length; x++){
	   gel(prefix + g_form.elements[x].fieldName).onchange =  function() {
		//Place onChange code here. In this example we are displaying an information message on the form with the name and value of every field.
                g_form.addInfoMessage(this.name + "has changed. New Value: " + this.value);     	   
	   };
   }
}