Check if People picker has any value on document.ready of EditForm.aspx in jsom sharepoint 2013

Question

I am trying to set a Person or Group field value only if it is null. I am checking this on document.ready() of EditForm.aspx of listItem, where If its null, then I want to set its value to currentUser ID.

However, I have written following code and it is working sometimes and sometimes not. I did check PeoplePickerdiv[0].innerText on ready function, sometimes I get actual user value(which is expected) and sometime 'Enter Name or Email'.

Also, I am trying to set this property readOnly , But its not working in Chrome. Please suggest.

$(document).ready(function(){
    var peoplePickerDiv = $("[id$='ClientPeoplePicker']");

    var peoplePickerEditor = peoplePickerDiv.find("input");
    //alert(peoplePickerEditor.val());

    var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];
    alert(spPeoplePicker);
    alert(peoplePickerDiv[0].innerText);

    if(peoplePickerEditor.val() == "") \\sometimes here I am getting null value in peoplePickerEditor.val() 
    {
        peoplePickerEditor.val("currentUserID");
        peoplePickerEditor.attr("contentEditable",false);
    }
    else
    {
        peoplePickerEditor.attr("contentEditable",false);
        return false;
    }

    spPeoplePicker.AddUnresolvedUserFromEditor(true);
});

Answer 1

The following code for your reference.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    SP.SOD.executeFunc('clientpeoplepicker.js', 'SPClientPeoplePicker', function(){
        var peoplePickerDiv = $("[id$='ClientPeoplePicker']");
        var peoplePickerEditor = peoplePickerDiv.find("input");
        var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];

        //check if people picker empty
        if(spPeoplePicker.IsEmpty()){
            var userName=GetCurrentUser();
            if(userName!=""){
                peoplePickerEditor.val(userName);
                spPeoplePicker.AddUnresolvedUserFromEditor(true);
            }
        }
        //disable the people picker
        spPeoplePicker.SetEnabledState(false);
        $('.sp-peoplepicker-delImage').hide();
    });  
});
function GetCurrentUser() {
    var userName="";
    var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/currentuser";
    $.ajax({
        url: requestUri,
        method: "GET",
        async:false,
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            userName = data.d.Title;
            if(userName=="System Account"){
                userName="administrator";
            }
        },
        error: function (data) {
        }
    });
    return userName;
}
</script>

Reference: SharePoint 2013: Client Side People Picker

Answer 2

Use something like below code to get the value in person or group field:

$(document).ready(function() {
    SP.SOD.executeFunc("/_layouts/15/clientpeoplepicker.js","SP.ClientContext",function(){
    setTimeout(function(){
        test();
    },2000);
});


function test() {
    var dispTitle = "People picker title";         
    var pickerDiv = $("[id^='PeoplePickerInternalName'][title='" + dispTitle + "']");
    var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];
    peoplePicker.OnUserResolvedClientScript = function GetData(pickerDiv) {        
         $("input[id^='field1']").val(peoplePicker.GetAllUserInfo()[0].EntityData.Email);
         $("input[id^='field2']").val(peoplePicker.GetAllUserInfo()[0].DisplayText);

    }        
}

To make input field read only/disabled:

To make input field read only/disabled, you need to add below attributes to your input field:

// for disabled i.e. cannot highlight value or change
disabled="disabled"

// for readonly i.e. can highlight value but not change
readonly="readonly"

using jQuery to make the change to the element (substitute disabled for readonly in the following for setting readonly attribute).

$('#inputFieldName').attr("disabled","disabled");

or

$('#inputFieldName').attr("disabled", true);