Using SPServices everything clientside in sharepoint just gets easier. :).
$().SPFindPeoplePicker() will do that darn magic that you propably tried to do using Javascript or jquery just a few minutes ago.
If you have a sharepoint form page with a people picker - This is as simple as it gets.
var pp = $().SPFindPeoplePicker({ peoplePickerDisplayName: "CustomerName" });
alert(pp.dictionaryEntries[0].Email);
Please note - the SPFindPeoplePicker ONLY works on sharepoint forms - If you have a custom form ie:
<div class="p">
<label>Name</label>
<span style="float:left;">
<SharePoint:PeopleEditor ID="spPeoplePicker" runat="server" Width="250" SelectionSet="User" MultiSelect="false" ClientIDMode="Static" />
</span>
</div>
Since the function looks for the PeoplePickerDisplayName, surrounded by <nobr></nobr>, You have to either change the SPFindPeoplePicker function (to search for something else) or fake the nobr like this.
<table><tr><td><nobr style="display:none">InsiderName</nobr>
<div class="p">
<label>Name</label>
<span style="float:left;">
<SharePoint:PeopleEditor ID="spPeoplePicker" runat="server" Width="250" SelectionSet="User" MultiSelect="false" ClientIDMode="Static" />
</span>
<div class="clear"></div>
</div>
</td></tr></table>
You should be able to pull at least these info:
<ArrayOfDictionaryEntry>
<DictionaryEntry><Key>SPUserID</Key><Value>2234</Value></DictionaryEntry>
<DictionaryEntry><Key>AccountName</Key><Value>verozlocal\xxx</Value></DictionaryEntry>
<DictionaryEntry><Key>Email</Key><Value>carl@veroz.com</Value></DictionaryEntry>
<DictionaryEntry><Key>Department</Key><Value>Development</Value></DictionaryEntry>
<DictionaryEntry><Key>SIPAddress</Key><Value>carl@veroz.com</Value></DictionaryEntry>
<DictionaryEntry><Key>PrincipalType</Key><Value>User</Value></DictionaryEntry>
<DictionaryEntry><Key>Title</Key><Value>Consultant</Value></DictionaryEntry>
</ArrayOfDictionaryEntry>
function getPeoplePickerSelectedUsername() {
alert($("[id*=divEntityData]").attr("key"));
}