Initially, I thought a simple .change function would work. Unfortunately, the managed metadata field doesn't trigger the .change event when a selection is made because the input field is being filled dynamically. I then noticed that the text value is stored in a span element so, I thought I'd try the following code:
[Do Not Use - For Reference Only]
NWF$('#' + mymanagedmetadata).on('DOMSubtreeModified', 'span', function () {
NWF$('#' + mytextbox).val(
NWF$('#' + mymanagedmetadata + ' span.valid-text').text()
);
});
However, I hit another road block.
Although this code does work in the console screen of Chrome,
it caused the form to not load at all when added to the Custom JavaScript section, plus it gave me the following message:
tViolation] Added synchronous DOM mutation listener to a 'DOMSubtreeModified' event. Consider using MutationObserver to make the page more responsive.
which lead me to learn that DOMSubtreeModified has been deprecated (so don't use that code).
I then began looking into the MutationObserver option suggested, but didn't have any luck.
I think MutationObserver is the way to go, but I'm just not sure how to make it work for managed metadata.
Hopefully someone else will be able to help you take it from here.
For anyone else looking into this, the problem lies in the following code of the managed metadata control:
<span id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_nf-Taxonomya398552a_53ef_43b9_a22b_49f4246f8467" class=" nf-associated-control">
<input name="ctl00$PlaceHolderMain$formFiller$FormView$ctl42$ctl00" type="hidden" id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_ctl00" formcontrolid="01cb44d5-28ce-4337-a142-d61ad73f683a" value="Public Works|4a3aeecd-0078-4b5a-9df7-187e1ac0e3e6">
<div id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_ctl01" class="ms-taxonomy ms-taxonomy-height ">
<div id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_ctl01controlHolder" class="ms-taxonomy-control-holder" style="width: 100%;">
<img src="/_layouts/15/images/EMMCopyTerm.png" title="Browse for a valid choice" alt="Browse for a valid choice" tabindex="0" class="ms-taxonomy-browser-button">
<div class="ms-taxonomy-fieldeditor ms-taxonomy-fieldeditor-standard ms-taxonomy-writing" title="Add Terms" style="width: 278px;">
<div id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_ctl01editableRegion" contenteditable="true" class="ms-taxonomy-writeableregion ms-inputBox ms-rtestate-write ms-inputBoxActive" title="Search for Term" disableribboncommands="True" allowmultilines="false" restrictpastetotext="True" style="height: calc(100% - 6px);" role="textbox" aria-autocomplete="both" aria-multiline="true" aria-label="Rich text editor" rtedirty="false">
<span class="valid-text" title="">
Public Works
<span id="ms-rterangecursor-start" aria-hidden="true"></span>
<span id="ms-rterangecursor-end" aria-hidden="true"></span>
</span>
</div>
</div>
</div>
<div id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_ctl01suggestionsContainer" class="ms-taxonomy-suggestion-container ms-rtefocus-invalid ms-taxonomy-hidden" unselectable="on">
<div class="ms-taxonomy-suggestion-holder" unselectable="on"></div>
<img src="/_layouts/15/images/CornerGrip.gif" unselectable="on" class="ms-taxonomy-panel-resizer">
</div>
</div>
</span>
You need to find a way to catch when the text value of this span tag (lines 8-12 above) changes:
<span class="valid-text" title="">
Public Works
<span id="ms-rterangecursor-start" aria-hidden="true"></span>
<span id="ms-rterangecursor-end" aria-hidden="true"></span>
</span>
Or when this input field's value (line 2 above) changes:
<input
name="ctl00$PlaceHolderMain$formFiller$FormView$ctl42$ctl00"
type="hidden"
id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_ctl00"
formcontrolid="01cb44d5-28ce-4337-a142-d61ad73f683a"
value="Public Works|4a3aeecd-0078-4b5a-9df7-187e1ac0e3e6"
>
but you only want to retrieve the value before the pipe | in this instance.
