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.

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

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.