ASP.Net Developer
ASP.Net Developer

Reputation: 331

Sharepoint 2013 People Picker Change event in Javascript

I want People picker Change Event in Javascript as i have to do some task if user is selected/changed in people picker using ClassName.

i have tried the following

$(".Assignedname").bind('input propertychange', function() { 
     alert("Onchange event" ); 
})

this fires when i type anything (i.e. text is changed ) , but not fires when user is selected in peoples picker. Kindly give me some solution. thanks

Upvotes: 1

Views: 8369

Answers (3)

vapcguy
vapcguy

Reputation: 7537

I used jQuery and a focusout event on the input field, instead, to achieve the same effect:

$('input[title="Title of my field"]').focusout(function() { 
    alert("Focusout event fired." ); 
    doPeoplePickerStuff();  // function for doing validation 
});

This has the advantage of being able to check the value of that field whenever they click on anything else - with the exception of the Submit button, if they click that immediately after typing in the field. Here's how I deal with that:

  1. Create a new Submit button and hide the other one:

    $('input[name*="diidIOSaveItem"]').parent().append('<input type="button" id="btnSubmit" onclick="doValidation()"></input>'); $('input[name*="diidIOSaveItem"]').hide();

  2. Create the doValidation() function for your new Submit button:

    function doValidation() {

     doPeoplePickerStuff();  // do validation on the field here
     if (personFound == true) {
         $('input[name*="diidIOSaveItem"]').click(); // clicks the real button so it does what it normally would
     }
    

    }

If you're firing the event in order to grab its value and do validation on it, use:

var personFound = false;
function doPeoplePickerStuff() {
    var personFieldSpan = $('span[id*="OriginalTitleOfMyField"]');
    var personFieldValue = stripExtraTextFromPeoplePicker(personFieldSpan.text());
    if (personFieldValue != "") {  // you could do comparisons against the existing value, too, by getting the original value(s) via REST call
        personFound = true;
    }
}

function stripExtraTextFromPeoplePicker(person) {
    var newPerson = person;
    console.log("Span text: " + newPerson);
    newPerson = newPerson.replace('Title of my field','');
    newPerson = newPerson.replace('Enter a name or email address...','');
    newPerson = newPerson.replace('Enter names or email addresses...','');
    newPerson = newPerson.replace('xSuggestions are available. Use up and down arrows to select.','');
    newPerson = newPerson.replace('Suggestions are available. Use up and down arrows to select.','');
    newPerson = newPerson.replace('\r','');
    newPerson = newPerson.replace('\n','');
    newPerson = newPerson.replace('\t','');
    newPerson = newPerson.trim();
    return newPerson;
}

Upvotes: 0

Richendra kumar ravi
Richendra kumar ravi

Reputation: 525

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;
        console.log(empname);
    }
});

Upvotes: 0

Martin
Martin

Reputation: 400

Once the people picker is initialized, you can access it in the js dictionary and assign a function to the OnValueChangedClientScript property of the picker. The function accepts two parameters, where the second parameter (userInfo) is a collection of users in the picker

var picker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerId + "_TopSpan"];
picker.OnValueChangedClientScript = function (elementId, userInfo) {
    for (var x = 0; x < userInfo.length; x++) {
        console.log(userInfo[x].Key);
    }
    alert("Total number of " + userInfo.length + " users is selected")
};      

Upvotes: 2

Related Questions