jQuery - Detect value change on page and call routine

Question

On an EditForm.aspx page I have a routine to hide/unhide a field based on the change of another field. It works fine on pageload, but I want to fire the change on the page itself if the user makes a change. What is the correct syntax to create the event? Thanks for the help!

$(document).ready(function () {
    var statusField = SPUtility.GetSPField('Status');
    var showOrHideField = function() {
        var statusFieldValue = statusField.Controls.value.substr(0,statusField.Controls.value.search("\\|"));
        if(statusFieldValue === 'New') {
            SPUtility.HideSPField('Comment');
        }
        else {
            SPUtility.ShowSPField('Comment');
        }
    };
    showOrHideField();

// none of these options worked
    $('#Status').bind ("change", function(){ showOrHideField(); });
    $('#Status').trigger('change');
    $('#Status').change(function(){ })
    $('#Status'.Dropdown).on('change', showOrHideField);
});

Answer 1

Because this is a managed metadata (taxonomy) field a change event will not be triggered due to the way the field is implemented. Therefore one way to solve the issue is to create a function to listen for changes. I found a listener function and added it to your code. It seems to have the desired result, every time the metadata field is updated the showOrHideField function is run.

$(document).ready(function () {
    var statusField = SPUtility.GetSPField('Status');
    var showOrHideField = function() {
    var statusFieldValue = statusField.Controls.value.substr(0,statusField.Controls.value.search("\\|"));
    if(statusFieldValue === 'New') {
        SPUtility.HideSPField('Comment');
    }
    else {
        SPUtility.ShowSPField('Comment');
    }
};
//run on startup
showOrHideField();

//listener function
function initTaggingControl() {
    RTE.CanvasEvents.registerListener(RTE.CanvasEvents.editableRegionChangedEvent, Function.createDelegate(null, onCustomTextChanged));
}

function onCustomTextChanged(sender, args) {
   if(args.editableRegion.innerText.length > 0){  //if value is specified?
       console.log(args.editableRegion.innerText);  //print term label
       showOrHideField();  //run your function
   }    
}
ExecuteOrDelayUntilScriptLoaded(initTaggingControl, 'ScriptForWebTaggingUI.js');

I found the listener function from a couple of sources: JQuery to execute on change of taxonomy field https://blog.vgrem.com/2013/01/23/using-sharepoint-taxonomywebtaggingcontrol-control-access-and-manipulate-from-client-side/

Answer 2

You can do this as below

$(statusField.Dropdown).on('change', function() { 
    alert('Changed');
});

Answer 3

The Status HTML element most likely has no id value 'Status'

So

$('#Status')

will always return undefined

var statusField = SPUtility.GetSPField('Status');

probably does some magic in the SPUtility to get the element reference.

Since you allready have the reference (provided SPUtility returns a proper DOM element)

You can do

statusField.addEventListener('change', function(){ ...your code... });

no jQuery needed, just plain good old ES5 JavaScript https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Note: if statusField.Controls.value is a string (I never used SPUtility)

It is easier to get the first value (or the whole as an array) with:

(statusField.Controls.value).split['|'][0]