SharePoint 2013 - Copy People Picker Field to Text Field

Question

I need a way to copy what users place in a People Picker field (single selection only) and place it into a single line text field. I'm not allowed to user Designer so this can only be done with javascript. I've found suggestions on pulling data, but none that will then place it into the text field. Can someone lend a hand with this. Here's the html code

<div title="Employee" class="sp-peoplepicker-topLevel" id="Employee_e527eed9-6e73-4eff-b75c-f4746a0e7656_$ClientPeoplePicker" SPClientPeoplePicker="true">
<input name="Employee_e527eed9-6e73-4eff-b75c-f4746a0e7656_$ClientPeoplePicker_HiddenInput" id="Employee_e527eed9-6e73-4eff-b75c-f4746a0e7656_$ClientPeoplePicker_HiddenInput" type="hidden">
    <div class="sp-peoplepicker-autoFillContainer" id="Employee_e527eed9-6e73-4eff-b75c-f4746a0e7656_$ClientPeoplePicker_AutoFillDiv"></div>
    <span class="sp-peoplepicker-initialHelpText ms-helperText" id="Employee_e527eed9-6e73-4eff-b75c-f4746a0e7656_$ClientPeoplePicker_InitialHelpText">Enter a name or email address...</span>
        <img class="sp-peoplepicker-waitImg" id="Employee_e527eed9-6e73-4eff-b75c-f4746a0e7656_$ClientPeoplePicker_WaitImage" alt="This animation indicates the operation is in progress. Click to remove this animated image." src="/_layouts/15/images/gears_anv4.gif?rev=23"><span class="sp-peoplepicker-resolveList" id="Employee_e527eed9-6e73-4eff-b75c-f4746a0e7656_$ClientPeoplePicker_ResolvedList"></span>
        <input title="Employee, Enter a name or email address..." class="sp-peoplepicker-editorInput" id="Employee_e527eed9-6e73-4eff-b75c-f4746a0e7656_$ClientPeoplePicker_EditorInput" type="text" size="1" value="" autocorrect="off" autocomplete="off" autocapitalize="off" data-sp-peoplePickerEditor="true"></div>

Thanks

Answer 1

You could update the single line of text in the list item by adding custom JavaScript code.

For more detailed information, refer to the articles below.

How to: Create, Update, and Delete List Items Using JavaScript.

Insert And Update SharePoint List Using JavaScript.

There is a similar post:

https://social.msdn.microsoft.com/Forums/office/en-US/e4f27de5-d7f9-43f0-ac0f-339a57f1d21c/setting-value-to-single-line-of-text-column-in-custom-list-using-jquery?forum=sharepointdevelopment

Answer 2

Here is a way to pull the information from the field after a user has been selected and is in the People Picker field. I use this myself.

var myTextField = $("input[id$='myTxtField']").text();
var peoplePicker = $("div[title$='People Picker']");
var peoplePickerValue = peoplePicker[0].innerHTML;

if(peoplePickerValue != "") {
    peoplePicker = peoplePicker[0].firstChild.id;
    var userName = peoplePicker.substr(4, peoplePicker.length);
    myTextField = userName;
}

Answer 3

you can use this snippet

  <script type="text/javascript" src="yourreferencetojquery"></script>

<script type="text/javascript">

$(document).on("click","input[Title='yourfieldtitle']",function()
{
    $(this).val(JSON.parse($("div[dir='none'] div input").val())[0].DisplayText);
});

</script>

Basically this snippet would copy the people picker name from the field as soon as you click on the required input field on which you need show the user name.