Skirting the Form Builder Component’s Javascript “onchange” Event Reservations

It’s always been rather mysterious to me that out of all the events that are included in the Custom Events options for form components, the one that could be the most useful  — onchange — is inexplicably missing from the list.  One action for which that omission is painfully clear is using a CheckBox component to fire javascript events.  onclick doesn’t work, neither onmousedown nor onmouseup work – I really need onchange.

After delving into the rendered code of a form containing a CheckBox component, I discovered why it’s not in the list – it’s reserved for actions such as canned custom events (HideControlIfValue, DisableControlIfValue, etc) among others.

I found a way to hijack the existing onchange function call and have it run a function of my own design.

Symantec Workflow Form Element Custom Events
I can’t find onchange in this list.

It seems as though most interactive form elements are dynamically given an onchange event by the Workflow at runtime:

2014-10-24_0-54-07

So we’re going to hijack that onchange with a bit of javascript.

First, I’ll give my CheckBox component an easy-to-use control id = AssetCheckBox.

Second, I’ll create a Body onload event, and enter this script:

 var assetCheck = document.getElementById('AssetCheckBox');
 assetCheck.parentNode.setAttribute("onchange","AssetCheck()"); 

This will effectively replace the onchange value for that element from the
dynamic value (the control id of the component sprinkled with some uniqueness)
to whatever we enter as the second argument in our setAttribute call.
Third, I’ll enter my functions into the Script section of the form editor.

 function AssetCheck(){
var assetpanel = document.getElementById('AssetPanel');
var assetcheck = document.getElementById('AssetCheckBox');
if (assetcheck.checked) {
assetpanel.className = 'gaTitleLabel';
} else {
assetpanel.className = 'gaHiddenElement';
} 
}; 

Because the CheckBox is already dynamically given an onchange event, we’re all set to debug and try it out.

5 thoughts on “Skirting the Form Builder Component’s Javascript “onchange” Event Reservations

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s