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;
 }

13 Comments

    • Well, if it’s empty, then that seems like the right thing to return. What would you expect to receive? In any case, this is a very old post and you should consider it a starting point you can use for your own needs.

      M.

      Reply
  1. “empty” not is “null”

    the correct return is a empty string.

    u return null because u dont find the person picker field.

    i have wrote some code to recover the person picker field in the 2 situatios, empty or not empty.

    Reply
  2. Hi Marc,AM working on list field validation …here am able to validate the all the fields except people picker field…when trying to find value in people picker its value as   and if we enter the name in people picker and try to find value its getting message like(  

    var flag=0;

    var control;// = getTagFromIdentifierAndTitle(“input”,”BooleanField”,”software required”);
    var control1;// = getTagFromIdentifierAndTitle(“input”,”TextField”,”MyText”);
    var control2;// = getTagFromIdentifierAndTitle(“input”,”TextField”,”Title”);
    var control3;// = getTagFromIdentifierAndTitle(“input”,”DateTimeFieldDate”,”date”);
    var control4;//
    var control5;//
    var control6;//
    function PreSaveAction()
    {
    //alert(“hiii”);
    control = getTagFromIdentifierAndTitle(“input”,”BooleanField”,”Software/CCC affected?”);
    control1 = getTagFromIdentifierAndTitle(“input”,”TextField”,”Software/CCC”);
    control2 = getTagFromIdentifierAndTitle(“input”,”DateTimeFieldDate”,”Software/CCC available”);
    control3 = getTagFromIdentifierAndTitle1(“Textarea”,”UserField_downlevelTextBox”,”People Picker”);
    // control4 = getTagFromIdentifierAndTitle(“input”,”BooleanField”,”Hardware affected?”);
    // control4.focus();
    // alert(“hi43″);
    flag=0;
    // flag1=0;
    //alert(“guuu”);
    document.getElementById(“val1″).style.display=’none’;
    document.getElementById(“val2″).style.display=’none’;
    document.getElementById(“val3″).style.display=’none’;
    //document.getElementById(“val4″).style.display=’none’;

    //chk(control);

    //alert(“hooo”);
    if(control.checked)
    {

    if(control1.value==””)
    {
    flag=flag+1;
    control1.focus();
    document.getElementById(“val1″).style.display=’block’;
    }
    else
    flag=flag+0;
    if(control2.value==””)
    {
    flag=flag+1;
    document.getElementById(“val2″).style.display=’block’;
    //alert(“dnt enter”);
    //alert(flag);
    }
    else
    flag=flag+0;
    //alert(control3);
    if(control3.value==””)
    {
    flag=flag+1
    //alert(flag);
    document.getElementById(“val3″).style.display=’block’;
    }
    else
    flag=flag+0;
    //cument.getElementById(“val3″).style.display=’none’;
    }
    control = getTagFromIdentifierAndTitle(“input”,”BooleanField”,”Calibration affected?”);
    control1 = getTagFromIdentifierAndTitle(“input”,”TextField”,”Calibration”);
    control2 = getTagFromIdentifierAndTitle(“input”,”DateTimeFieldDate”,”Calibration available”);
    control3 = getTagFromIdentifierAndTitle2(“Textarea”,”UserField_downlevelTextBox”,”People Picker”);
    chk(control,control1,control2,control3);

    //return true;
    }

    function chk(control,control1,control2,control3)
    {
    //cument.getElementById(“val3″).style.display=’none’;
    document.getElementById(“val4″).style.display=’none’;
    document.getElementById(“val5″).style.display=’none’;
    document.getElementById(“val6″).style.display=’none’;
    if(control.checked)
    {

    if(control1.value==””)
    {

    flag=flag+1;
    document.getElementById(“val4″).style.display=’block’;
    //cument.getElementById(“val3″).style.display=’none’;

    //alert(“dnt enter”);
    //alert(flag);
    }
    else
    flag=flag+0;
    if(control2.value==””)
    {

    flag=flag+1;
    document.getElementById(“val5″).style.display=’block’;
    //alert(“dnt enter”);
    //alert(flag);
    }
    else
    flag=flag+0;
    if(control3.value==””)
    {

    flag=flag+1;
    document.getElementById(“val6″).style.display=’block’;
    //cument.getElementById(“val3″).style.display=’none’;
    }
    else
    flag=flag+0;
    //cument.getElementById(“val6″).style.display=’none’;
    //document.getElementById(“val3″).style.display=’none’;
    }
    control = getTagFromIdentifierAndTitle(“input”,”BooleanField”,”Wiring affected?”);
    control1 = getTagFromIdentifierAndTitle(“input”,”TextField”,”Wiring”);
    control2 = getTagFromIdentifierAndTitle(“input”,”DateTimeFieldDate”,”Wiring available”);
    control3 = getTagFromIdentifierAndTitle3(“Textarea”,”UserField_downlevelTextBox”,”People Picker”);
    chk2(control,control1,control2,control3);

    //return true;
    }

    function chk2(control,control1,control2,control3)
    {

    document.getElementById(“val7″).style.display=’none’;
    document.getElementById(“val8″).style.display=’none’;
    document.getElementById(“val9″).style.display=’none’;
    if(control.checked)
    {

    if(control1.value==””)
    {

    flag=flag+1;
    document.getElementById(“val7″).style.display=’block’;
    //cument.getElementById(“val6″).style.display=’none’;
    //cument.getElementById(“val3″).style.display=’none’;
    //alert(“dnt enter”);
    //alert(flag);
    }
    else
    flag=flag+0;
    if(control2.value==””)
    {

    flag=flag+1;
    document.getElementById(“val8″).style.display=’block’;
    //alert(“dnt enter”);
    //alert(flag);
    }
    else
    flag=flag+0;
    if(control3.value==””)
    {
    flag=flag+1;
    document.getElementById(“val9″).style.display=’block’;
    }
    else
    flag=flag+0;
    }
    control5 = getTagFromIdentifierAndTitle(“input”,”BooleanField”,”Rework required”);
    control6 = getTagFromIdentifierAndTitle(“TextArea”,”TextField”,”Rework Description”);
    chk3(control5,control6);
    }
    function chk3(control5,control6)
    {

    document.getElementById(“val10″).style.display=’none’;
    if(control5.checked)
    {

    if(control6.value==””)
    {
    //alert(flag);
    flag=flag+1;
    document.getElementById(“val10″).style.display=’block’;
    //cument.getElementById(“val9″).style.display=’none’;
    //cument.getElementById(“val6″).style.display=’none’;
    //

    //alert(“dnt enter”);
    //alert(flag);
    }
    else

    flag=flag+0;
    }
    }
    function getTagFromIdentifierAndTitle(tagName, identifier, title)
    {
    var len = identifier.length, colonindex, splittitle, taglen, titlelen = title.length, slen;
    var tags = document.getElementsByTagName(tagName);
    for (var i=0; i < tags.length; i++)
    {
    var tempString = tags[i].id;
    taglen = tags[i].title.length;
    if(taglen 0 && splittitle.indexOf(“:”) == -1))
    continue;
    if ((identifier == “” || tempString.indexOf(identifier) == tempString.length – len))
    {
    return tags[i];
    }
    }
    return null;
    }
    function getTagFromIdentifierAndTitle1(tagName, identifier, title) {
    var len = identifier.length;
    var tags = document.getElementsByTagName(tagName);

    var flag=0;

    for (var i=0; i < tags.length; i++) {
    var tempString = tags[i].id;

    //if(tempString==”g_48fa8682_6a56_48df_9c92_5e10ed38e224_ff8_1_ctl00_ctl00_HiddenUserFieldValue”)
    //alert(tempString);

    if (tags[i].title == title && (identifier == “” ||
    tempString.indexOf(identifier) == tempString.length – len)) {

    //alert(title);
    flag=flag+1;
    //return tags[i];
    }

    if(flag==2)
    {
    return tags[i];

    }
    }
    return null;
    }
    function getTagFromIdentifierAndTitle2(tagName, identifier, title) {
    var len = identifier.length;
    var tags = document.getElementsByTagName(tagName);

    var flag=0;

    for (var i=0; i < tags.length; i++) {
    var tempString = tags[i].id;

    //if(tempString==”g_48fa8682_6a56_48df_9c92_5e10ed38e224_ff8_1_ctl00_ctl00_HiddenUserFieldValue”)
    //alert(tempString);

    if (tags[i].title == title && (identifier == “” ||
    tempString.indexOf(identifier) == tempString.length – len)) {

    //alert(title);
    flag=flag+1;
    //return tags[i];
    }

    if(flag==3)
    {
    return tags[i];

    }
    }
    return null;
    }
    function getTagFromIdentifierAndTitle3(tagName, identifier, title) {
    var len = identifier.length;
    var tags = document.getElementsByTagName(tagName);

    var flag=0;

    for (var i=0; i < tags.length; i++) {
    var tempString = tags[i].id;

    //if(tempString==”g_48fa8682_6a56_48df_9c92_5e10ed38e224_ff8_1_ctl00_ctl00_HiddenUserFieldValue”)
    //alert(tempString);

    if (tags[i].title == title && (identifier == “” ||
    tempString.indexOf(identifier) == tempString.length – len)) {

    //alert(title);
    flag=flag+1;
    //return tags[i];
    }

    if(flag==4)
    {
    return tags[i];

    }
    }
    return null;
    }

    function f()
    {

    //alert(“Hi”);
    //javascript: {ddwrt:GenFireServerEvent(‘__commit’)}

    //ddwrt:GenFireServerEvent(‘__commit’);

    PreSaveAction();

    if(flag==0)
    {

    document.getElementById(“btn”).click();
    //cument.getElementById(“val3″).style.display=’none’;
    //cument.getElementById(“val6″).style.display=’none’;
    //cument.getElementById(“val9″).style.display=’none’;
    }
    //alert(flag);

    //windows.location=”http://life:30159/Lists/required/AllItems.aspx”;
    }
    function f2()
    {

    //alert(“Hi”);
    //javascript: {ddwrt:GenFireServerEvent(‘__commit’)}

    //ddwrt:GenFireServerEvent(‘__commit’);

    PreSaveAction();

    //alert(flag);

    if(flag==0)
    {
    //alert(“flag4″);
    document.getElementById(“btn2″).click();
    }
    //windows.location=”http://life:30159/Lists/required/AllItems.aspx”;
    }

    Reply
    • surya:

      There’s way too much code in your comment to sift through. It looks like you’re doing a lot of debugging, so keep at it. Isolate what you are doing with the People Picker until you get it right and go from there.

      M.

      Reply
  3. will this work for View Form also? Can you post code for the same. My req is if current user name and user field name are same than i should enable edit button in View Form.

    Reply

Leave a Reply