I have a problem changing a people picker in a custom form.

Need when writing or changing the value in the people picker I know, I'm using javascript using jquery.

Already tried using this code:

$('#[id people picker]').on('change', function(){


$('#[id people picker]').change(function(){

But there was no answer. Does anyone have another solution. Please help me because I need it soon.

1 Answer 1


If you look at the HTML SP renders for a peoplepicker you will see why your code is not working.

But here's how you can attach an event to the onchange:

$(".ms-usereditor div").bind('input propertychange', function() { 
     alert("Onchange event" ); 


Here's a way which allows easy access/modification for all clientside peoplepicker information.

function attachPeoplePickerChange(container) {
    //container needs to be an dom element containing the peoplepicker 
    var pickerId = container.querySelector('div[spclientpeoplepicker="true"][id$="_TopSpan"]').getAttribute('id');
    //helper function to ensure all elements are already created
    var addOnChanged = function (ctx) {
        //is everything ready we need?
        if (SPClientPeoplePicker && SPClientPeoplePicker.SPClientPeoplePickerDict && SPClientPeoplePicker.SPClientPeoplePickerDict[pickerId]) {
            //get picker instance (which has a lot of useful properties btw)
            var picker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerId];
            //save old event (needs to stay in its context due to internal calls
            picker.oldChanged = picker.OnControlResolvedUserChanged;
            picker.OnControlResolvedUserChanged = function () {
                //do your code here
                //get current selected users
                //let old event do its magic
        } else {
            //not everything was ready - wait a 10th of a sec
            setTimeout(function () { addOnChanged(ctx); }, 100);

An example output (the first user was already selected when opening the page and the second was just picked): An example output (the first user was already selected when opening the page and the second was just picked)

  • Where can I call this function from my JSLink file? Do I call it on $( document ).ready()??? I have three people pickers on my Edit and New forms, two of which I am targeting to extract people from and using that to populate the third. How can I target just the two people picker containers I need? Commented Aug 24, 2018 at 15:15

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.