Getting the Value of a Managed Metadata Column with jQuery

There was a post from Roger Langedal over on SPYam the other day asking about getting the value of a Managed Metadata column using jQuery.

I hadn’t tried this before, so I thought I should give it a go.

[important]By the way, if you are a SharePoint person (you’ve arrived here, so I think we can assume it’s pretty likely you are) and you aren’t a member of SPYam, which is the Yammer-based SharePoint community created by Joel Oleson (@joeloleson), then you should be. If you’d like an invitation, ping me and I’ll send you one. UPDATE 2013-01-04: Actually, anyone can request membership themselves at this point. Just go to SPYam and sign up.[/important]

As when I first figured out how to get the value of a People Picker, which later evolved into the SPFindPeoplePicker function in SPServices, consider this a rough first pass. I’m sure I’m not covering many edge cases because I haven’t experimented enough yet.

The basics are pretty simple. The Managed Metadata Picker (or perhaps it should be called a Taxonomy Picker, given the CSS classes that Microsoft uses within it) is embedded within the form much like the People Picker is. Luckily there is a pretty easy way to identify it in the page. When you dig into the markup in the DOM, there’s a div which has the column name as its Title attribute.

In my experiment, I’ve got a column called Office, and here’s what that div looks like:

<div class="ms-taxonomy-fieldeditor ms-taxonomy-writing" title="Office" style="width: 362px;">

There’s another div within that one, and within the second div, you’ll see several spans.

If there are spans with the div which have the CSS class valid-text, then they contain the valid value(s) you’ve selected for the picker. For example, Newton Centre below.

If there are spans within the div with the CSS class invalid-text, they contains the entered value(s) which aren’t legitimate values for that column. For instance, if I type in Hanover for my Office (which isn’t one of the allowed values), it’ll be in one of these spans.

So getting at the acceptable values is fairly simple with jQuery. Again, this is a first pass, but it should be serviceable.

// Find the div for the column which contains the entered data values
var thisDiv = $("div[title='Office']");
// Fill an array with the acceptable values
var acceptableValues = [];
thisDiv.find("span.valid-text").each(function() {
  var thisValue = $(this);
  acceptableValues.push(thisValue.text());
});

At this point, you’ll have an array which contains all of the text values which are acceptable, meaning that they are legitimate values from the Term Set.

If you’d like to get at the unacceptable values, it’s basically the same idea:

// Find the div for the column which contains the entered data values
var thisDiv = $("div[title='Office']");
// Fill an array with the unacceptable values
var unacceptableValues = [];
thisDiv.find("span.invalid-text").each(function() {
  var thisValue = $(this);
  unacceptableValues.push(thisValue.text());
});

From here, you could do whatever you’d like with the values. They are in an array, so if you’d like to save them to another column, you’ll probable want to join them into a single string. The code below will join the values together into one nice, displayable string, with the values separated by commas. If there’s just a single value, that the string will be that single value.

var accepted = acceptableValues.join(", ");
var unaccepted = unacceptableValues.join(", ");

Let me know if this works for you, and if not, what issues you might have. Hope it helps.