Get a People Picker’s Current Value on a Form

There’s a nice article over at the SharePoint Designer Team Blog about how to manipulate a List Form Field (AKA Data Form Field) using Javascript.  It gives some great methods to accomplish this, but if you’d like to get the current value of a People Picker on a form (for validation purposes, most likely), the info isn’t there to do so reliably.  I had to do this today, so I wanted to post what I came up with. As usual when I post these things, I’ve left in the alerts that I used for debugging in case it helps you.

// Find a People Picker’s value using its identifier (ff1, ff2, etc.)to find it in the page
function getPickerInputElement(identifier) {
  var tags = document.getElementsByTagName(‘DIV’);
  for (var i=0; i < tags.length; i++) {    var tempString = tags[i].id;    //alert('tags[' + i + '].id = ' + tempString);    if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf(‘UserField_upLevelDiv’) > 0)){
    //alert(‘HIT for ‘ + identifier + ‘ id=’ + tags[i].id + ‘ value=’ + tags[i].value);
    var innerSpans = tags[i].getElementsByTagName(“SPAN”);
    for(var j=0; j < innerSpans.length; j++) {      //alert('innerSpans[' + j + '].id = ' + innerSpans[j].id);      if(innerSpans[j].id == 'content') {       //alert('HIT for ' + identifier + ' id=' + innerSpans[j].id + ' innerHTML=' + innerSpans[j].innerHTML);       return innerSpans[j].innerHTML;      }     }      }   }   return null;  }[/sourcecode]

Similar Posts

16 Comments

  1. Mark I added the following code to my CEWP in the Newform.aspx page but i got null value returned from the function. Any idea of such behavior. i am trying to compalre value between two people picker field, if they are same send an alert. ButIf the value is null how can i compare with another control:

    function getPickerInputElement(identifier)
    {
    var tags = document.getElementsByTagName(‘DIV’);
    for (var i=0; i 0))
    {
    if(identifier == tempString)
    {
    var innerSpans = tags[i].getElementsByTagName(“SPAN”);
    for(var j=0; j < innerSpans.length; j++)
    {
    if(innerSpans[j].id == 'content')
    {
    return innerSpans[j].innerHTML;
    }
    }
    }
    }
    }
    return null;
    }
    function PreSaveAction()
    {
    var PickerPerson1 = getPickerInputElement('Primary_x0020_Site_x0020_Adminis_41bc75f7-fb89-4d45-897a-372aee8074b6_$ClientPeoplePicker');
    var PickerPerson2 = getPickerInputElement('Secondary_x0020_Site_x0020_Colle_da90bebe-eb06-4b87-8a2b-f50bb56d39a8_$ClientPeoplePicker');

    alert(PickerPerson1);
    alert(PickerPerson2);

    }

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.