Get the value of a SharePoint People Picker field via javascript

The ever handsome and cunning Marc D. Anderson (I felt like giving the man credit, since I use so many of his solutions!!) saved my behind once again with a fantastic javascript!
This time I was looking to find a solution to get the value from a SharePoint people picker field via jquery.

A quick search took me to his blog where I found this code:

// Find a People Picker's value using its identifier (ff1, ff2, etc.)to find it in the page

function getPickerInputElement(identifier) {
var tags = document.getElementsByTagName('DIV');
for (var i=0; i < tags.length; i++) {
var tempString = tags[i].id;
//alert('tags[' + i + '].id = ' + tempString);
if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)){
//alert('HIT for ' + identifier + ' id=' + tags[i].id + ' value=' + tags[i].value);
var innerSpans = tags[i].getElementsByTagName("SPAN");
for(var j=0; j < innerSpans.length; j++) {
//alert('innerSpans[' + j + '].id = ' + innerSpans[j].id);
if(innerSpans[j].id == 'content') {
//alert('HIT for ' + identifier + ' id=' + innerSpans[j].id + ' innerHTML=' + innerSpans[j].innerHTML);
return innerSpans[j].innerHTML;
}
}
}
}
return null;
}

This works by filling in a variable with the result of the function. You give the identifier as a parameter when you call it:

var person = getPickerInputElement("ff18");

Have you ever seen an easier way to get the value of a SharePoint People Picker field via javascript ?

About: Marijn

Marijn Somers (MVP) has over 14 years experience in the SharePoint world, starting out with SP2007. Over the years the focus has grown to Office 365, with a focus on collaboration and document management. He is a business consultant at Balestra and Principal Content Provider for "Mijn 365 Coach" that offers dutch employee video training. His main work tracks are around user adoption, training and coaching and governance. He is also not afraid to dig deeper in the technicalities with PowerShell, adaptive cards or custom formatting in lists and libraries. You can listen to him on the biweekly "Office 365 Distilled" podcast.


12 thoughts on “Get the value of a SharePoint People Picker field via javascript”

  1. How do you get the ff18 value from your page. I have 3 people pickers on my form and none of them have a reference for “ffxx”? Tried using the control id but that doesn’t work.

  2. Thanks for the quick response. I had already seen this one. He shows how to set the value but not retrieve it. It returns null. It also requires SPServices which throws javscript errors just for being included in your page. SPUtility and SPServices always throw addMethods is not supported.

  3. Can you please explain how to get that identifier stuff. Unless I know that , I cant implement this. Also please don’t just give that “Try this new Link”.

  4. hi,
    Thanks for the good article. am able to get the null check using your code.But, how to retrieve other attributes, like, if i want to get the email id, display name and other details from this ?
    i displayed
    alert( innerSpans[0].innerHTML + ‘ is 0th index’); and i got some details, but i am stuck with how to extract those dictionaryentrys from dictionaryentryarray.
    please help!

Leave a Reply

Your email address will not be published. Required fields are marked *