can anyone please tell me, How to get ClientPeoplePicker value using javascript.?


4 Answers 4


If you just need to access the values, you could do it like this:

var dispTitle = "APickerField";      
var pickerDiv = $("[id$='ClientPeoplePicker'][title='" + dispTitle + "']");      
var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];

The GetAllUserInfo() returns an array with one index pr entity in the picker, with the following properties available:

enter image description here


This is the form field: enter image description here

And this the tag you need to get the ID from: enter image description here


So one could just have done it like this:


And if you check the SPClientPeoplePicker.SPClientPeoplePickerDict object, it will have all your pickers.

  • Thanks for your reply. i will try and let you know if it solves my problem
    – User5590
    Commented Jul 24, 2014 at 7:05
  • I am getting error ' Unable to get property 'id' of undefined or null reference ' at peoplePicker line
    – User5590
    Commented Jul 24, 2014 at 7:23
  • That's probably because it didn't find any controller. "APickerField" is the Display Title to the field, so you'll have to change that to the field you use, or get the reference by another method. Commented Jul 24, 2014 at 7:44
  • Thanks for your help. Now its working. i have added client people picker programatically, so it was generating tag other way. then i updated my id to var dispTitle = "ASPD_Editors"; var pickerDiv = $("[id$='aspd_ctrl_ASPD_Editors_TopSpan'][title='" + dispTitle + "']"); And now finally its working. i almost wasted my 1 day on it. Thank you very much Anders.
    – User5590
    Commented Jul 24, 2014 at 8:37
  • What if I want value of Department property?
    – Ashish
    Commented Feb 15, 2016 at 6:24
<pre>/* get value from clientPeoplePicker */

// value from first input field in client people picker div
var data = $("Div[title='Antragssteller'] > input" ).val(); 
var jsonData = JSON.parse(data);

// and now you can see the properties
    "DisplayText":"Doe, John",
    "ProviderDisplayName":"Active Directory",
    "AutoFillDisplayText":"Doe, John",
    "AutoFillTitleText":"xyz@xyz\nActive Directory\xyz\\xyz",

  • this is awesome! where were you a year ago when I needed this? i did it the long way but this is way better.
    – Ice Cube
    Commented Mar 3, 2020 at 23:58

You can use OnValueChangedClientScript property of ClientPeoplePicker as follows:


<SharePoint:ClientPeoplePicker ID="peoplePicker1" runat="server" ClientModeOnValueChangedClientScript="peoplePicker1_ValueChanged" />


var selectedUsers = []; function peoplePicker1_ValueChanged(elemId, userKeys) { if (elemId.indexOf('peoplePicker1') !== -1) { if (userKeys.length > 0) { for (var i = 0; i < userKeys.length; i++) { selectedUsers.push(userKeys[i]); } } else { selectedUsers = []; } } }

Reference: ClientPeoplePicker.OnValueChangedClientScript property


You need to get the picker id for SharePoint Client People Picker change event. I have got the same using OnUserResolvedClientScript as below. Here to get the picker div I have followed the approach of getting it via the people picker text box id and the title name which you can get the by inspecting the element. put the below code in $(document).ready function. Happy Coding

SP.SOD.executeFunc('clientpeoplepicker.js', 'SPClientPeoplePicker', function() {
var pickerDiv = $("[id^='Employee_x0020_Name'][title='Employee Name']");
var picker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];
picker.OnUserResolvedClientScript = function(peoplePickerId, selectedUsersInfo) {
 //It will get the desired display name of the people from picker div, similarly any other property can be accessed via selectedUsersInfo
    var empname = selectedUsersInfo[0].DisplayText;

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.