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