Is there any way to get the People Picker value using Jquery/JavaScript?

Currently we use title tag to get the id of our input fields values but people picker has only one generic title field even if you have 2 or more people picker field. What we have now is get the generated ID of People Picker in our script


var assignedUserVal = $('#ctl00_ctl41_g_2e64d0f7_f440_4b7c_9c50_383fe595b704_ff51_ctl00_ctl00_UserField_upLevelDiv').text();

Yesterday we have encounter this issue that when our master page has been change, the SharePoint Field ID is also change from ctl00_ctl41_g to ctl00_ctl42_g that why we just change the id's to fix the issue.


8 Answers 8


If this is in some SharePoint form you could use the SPClientPeoplePicker.SPClientPeoplePickerDict object to get the values. The WPQ2FormCtx object have the ID of all your PeoplePickers in the form. If you take a look under WPQ2FormCtx.ListSchema.YourFieldInternalName.TopLevelElementId. Then you could use it like this:

SPClientPeoplePicker.SPClientPeoplePickerDict[  WPQ2FormCtx.ListSchema.YourFieldInternalName.TopLevelElementId  ].GetAllUserInfo()

This is a know property of .NET controls

You can use like this

document.getElementById('<%= "PeopleEditorID".ClientID %>').click()

or use you can use ClientIDMode property for you element. If you set it into Static then the ClientID value will be set to the value of the ID property:

<SharePoint:PeopleEditor ID="PeopleEditorID" ClientIDMode="Static" />

Now use the ClientID in your JavaScript code to get the ID (PeopleEditorID)

Source: Link

  • also add a little information. script must be inside page. script link will not work Commented Nov 6, 2015 at 5:44

(other answer) server-side code will only be of help if you can change the New/Edit-Forms and add .Net code

If you want to monkey patch after the form is displayed,
you can get an DOM object array of all PeoplePickers with:

var pPickers=document.querySelectorAll('.sp-peoplepicker-topLevel');

no jQuery required
First element in the array is the first PeoplePicker on the screen


You can achieve this in jquery.

var User;

var inputuserfield = $("div[title='People Picker']"); 

var UserControlSpan = $("span[title='UserField']").find(inputuserfield);

 if (UserControlSpan != null && UserControlSpan.text() != null && UserControlSpan.text().trim().length > 1 ) {
     User =  UserControlSpan.text().trim();

I will suggest you to add a SPAN around your people control. Reason :if you have multiple people controls then you will get wrong result as all people control will have same title. Give different ID to each SPAN.

If you have only 1 people picker field on the page use the below code:

var User;

var inputuserfield = $("div[title='People Picker']"); 

 if (inputuserfield != null && inputuserfield.text() != null && inputuserfield.text().trim().length > 1 ) {
     User =  inputuserfield.text().trim();

Mark this as answer if works for you, someone might be looking for same


If the field id is dynamic you can use startswith operator to get value from that field. like if you are taking 'title' then take it as var value = $('input[title^="title"]').val(); here atleast field name should start with title then if the dynamic value changes still you can access the value of title field.


Here you go:

var RequestedForpeoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.RequestedFor_TopSpan;
    var RequestedForu = RequestedForpeoplePicker.GetAllUserInfo();

and my peoplepicker

                <SharePoint:ClientPeoplePicker Required="true" ValidationEnabled="true" ID="RequestedFor" UseLocalSuggestionCache="true" PrincipalAccountType="User" runat="server" VisibleSuggestions="3" Rows="1" AllowMultipleEntities="false" CssClass="ms-long ms-spellcheck-true user-block" ErrorMessage="" ClientIDMode="Static" AutoFillEnabled="True"/>                

Check the id and clientIdMode before using it


You should use SPClientPeoplePicker - default JS object for SP2013.

More info see there: Get the ID and Name from multiple Client side People pickers to store in a list

Using SPClientPeoplePicker you can read members, write member, use groups and filters


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.