How to select a SharePoint people picker using JQuery

Question

Im trying to select a sharepoint peoplepicker element in my form list.

i tried:

$("#ctl00_ctl41_g_326d802c_cd66_443c_9312_18e0ff9786b9_ctl00_iwPermIterator_ctl19_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_upLevelDiv")

But i had issues previously where the id would change, so that would not be a solution.

I also tried,

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

But it would select 3 people pickers in my form list

Therefore, can someone suggest a way to select this element.

Edit: Here are 2 screenshots of the people-picker i have in my SharePoint environment.

I would like to update the reason for this behaviour is we are using a custom form (infowise forms which made all peoplepickers have the same title.)

Answer 1

As discussed earlier, please modify the code snippet with index to choose the people picker needed:

$("div[title='People Picker']")[0]

Answer 2

You can do this using the functions provided by SharePoint itself. The following line gives you the id of the top level element of your people picker (replace "YourFieldInternalName" by internal name which you have given).

var pickerDivID = WPQ2FormCtx.ListSchema.YourFieldInternalName.TopLevelElementId

If this does not work, WPQ2FormCtx might not be the correct object. Just open browser console and type WPQ or FormCtx, you will get some like WPQ2FormCtx or WPQ4FormCtx. Use that in the above statement.

You can use this ID wherever you want. To get values from peoplepicker as shown below.

var pickerObject = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDivID];

This object contains all the information in the people picker column of the form.

Open the form in new page or by going to top ribbon -> list -> default new form. Try getting that wpformctx here. And use that one in the code.

Ideally it should work with infowise customization as well because SharePoint fields remain the same.