How to get the people picker value using jquery?

Question

I am trying to get the people picker value on EditForm.aspx using Jquery. I have 2 people picker controls on Edit form.

I am not able to get it using jquery.

Please help me to sort it out.

Answer 1

You can access normal peoplepicker in SP2013 the same way you would access a clientside one.

The Problem is, that you need to know the ID to identify the peoplepicker.

If you check out the SPClientPeoplePicker.SPClientPeoplePickerDict object in your debugging console, there are all peoplepicker of this page stored in it.

You can access the entered user's information like this:

SPClientPeoplePicker.SPClientPeoplePickerDict[yourPickersID].GetAllUserInfo()

Now every object has stored the properties of an user that was entered in the picker.

Here's an example for a group

Here's some code to iterate over all picker and output all users to the console:

// get all user from all peoplepicker on the page - without jQuery 
for (var propertyName in SPClientPeoplePicker.SPClientPeoplePickerDict) {
    var allUserInfo = SPClientPeoplePicker.SPClientPeoplePickerDict[propertyName].GetAllUserInfo()
    for (var user in allUserInfo) {
        console.log(allUserInfo[user]);
    }
}

Output:

Answer 2

You are smart when you have jQuery with you.

$('div[id$="_upLevelDiv"]').eq(2).find('div').eq(0).attr('description')

I have used index because I have more than two peoplePicker in my form. I have captured the third $('div[id$="_upLevelDiv"]').eq(2) people picker resolved value.

Answer 3

Since in SharePoint 2013 Client Side Rendering (CSR) is the default rendering mode, i would recommend you the following approach of getting People Picker value in Edit form.

Assume a Tasks list that contains AssignedTo field, then the following example demonstrates how to retrieve the value of AssignedTo field in Edit form:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {


    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

      OnPreRender: function(ctx) { 

        var assignedTo = ctx.ListData.Items[0].AssignedTo;

      }

    });
}); 

Result

AssignedTo value:

[
    {
        "Claim": null,
        "Key": "Approvers",
        "DisplayText": "Approvers",
        "IsResolved": true,
        "Description": "Approvers",
        "EntityType": "",
        "EntityGroupName": "",
        "HierarchyIdentifier": null,
        "EntityData": {
            "SPUserID": "11",
            "AccountName": "Approvers",
            "PrincipalType": "User"
        },
        "EntityDataElements": [
            {
                "First": "SPUserID",
                "Second": "11"
            },
            {
                "First": "AccountName",
                "Second": "Approvers"
            },
            {
                "First": "PrincipalType",
                "Second": "User"
            }
        ],
        "MultipleMatches": [],
        "ProviderName": "",
        "ProviderDisplayName": ""
    }
]

How to apply the changes

There are at least two options how to apply the changes:

1. Using JSLink property
2. Place JavaScript template on page via Script Editor/Content Editor web parts

Here is how to apply the changes using the second option:

1. Switch the page into edit mode
2. Add Script Editor webpart right below the list view web part.
3. Put the specified code by wrapping it using script tag code into the Script Editor, for example: <script type="text/javascript">{Template JS code goes here}</script>
4. Save the page

Answer 4

call the below fun inside document.ready ()

             var mPplPickerName=    getEditorPeoplePickerValues("your 
           pplpicker fieldname");

outside the doc.ready function:

      function getEditorPeoplePickerValues(fieldName) { // Field Title

   //alert(' inside get pplpicker sub function');

    editorNames = "";
    var _PeoplePicker = $("div[title='" + fieldName + "']");
    var _PeoplePickerTopId = _PeoplePicker.attr('id');
    var ppobject = 
       SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
       editorsInfo = ppobject.GetAllUserInfo();
          var i;
        for (i = 0; i < editorsInfo.length; ++i) {
           editorNames += editorsInfo[i].DisplayText + ";#";
           }
       //alert(editorNames);
        return editorNames;
   }

i have tested, its working for me!

Answer 5

Try to find the related <div> in the People picker by ID:

var relateemail = document.getElementById('ID_UserField_upLevelDiv').innerText;

Answer 6

You have to take site users by REST query. Store all users in some variable. Then in aspx page, use auto complete functionality of jquery UI. You can use following REST query to fetch all users from site users

_spPageContextInfo.webAbsoluteUrl + "/_api/web/SiteUsers