0

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);
});

3 Answers 3

0

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/

1
0

You can do this as below

$(statusField.Dropdown).on('change', function() { 
    alert('Changed');
});
1
  • Thanks Amal, I tried your idea but the event did not fire. I also tried $(statusField.Dropdown).change(function() { alert('Changed'); }); This is a managed metadata field so not sure if 'Dropdown' is supported. Jul 22, 2016 at 16:44
0

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]
2
  • Hi Danny, I found (statusField.Controls.value).split('|',1) returned ["New Field"]. What I have returns, New Field. Jul 22, 2016 at 20:16
  • Compare your code with my code... I did not use the second parameter of the .split function. My code converts to an array, then gets the [0] element from the array Jul 23, 2016 at 8:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.