SharePoint JSOM to get User Profile Properties from the People Picker control

<!--References:
//https://thermofisher-my.sharepoint.com/_api/SP.UserProfiles.PeopleManager/GetMyProperties
//http://www.vrdmn.com/2013/07/sharepoint-2013-get-userprofile.html
//http://www.vrdmn.com/2013/07/sharepoint-2013-get-userprofile.html
//http://aaclage.blogspot.in/2015/05/get-user-profile-properties-and-update.html
//https://www.napacloudapp.com/Share/Edit/e201f57407b04e6484adb31f17a02201#/Pages/Default.aspxx -->


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/_layouts/15/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/_layouts/15/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/_layouts/15/init.js" type="text/javascript"></script>
//<script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script>
<script src="/_layouts/15/sp.js" type="text/javascript"></script>
<script src="/_layouts/15/SP.UserProfiles.js" type="text/javascript"></script>

<script type="text/javascript">


$(document).ready(function(){

});


SP.SOD.executeOrDelayUntilScriptLoaded(startOnChangeEvenet, 'SP.UserProfiles.js');

function startOnChangeEvenet(){
$("div[title='Name']").click(function() {
    alert("Onchange event");
    getUserProperties();
})

}


    var userProfileProperties;

    function getUserProperties() {

       var clientContext = new SP.ClientContext.get_current();
       var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
       
       
        //Property to fetch from the User Profile
      var propertyName = "PreferredName";
   
   //Domain\Username of the user (If you are on SharePoint Online)
  var targetUser = getUserFromPicker(); //"i:0#.f|membership|vardhaman@yoursite.onmicrosoft.com";

if(targetUser != undefined){  
   
       userProfileProperty = peopleManager.getUserProfilePropertyFor(targetUser, propertyName)
       
       clientContext.load(userProfileProperty);
       clientContext.executeQueryAsync(onRequestSuccess, onRequestFail);
       }
     
       /* var clientContext = new SP.ClientContext.get_current();
        var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
        userProfileProperties = peopleManager.getMyProperties();
        clientContext.load(userProfileProperties);
        clientContext.executeQueryAsync(onRequestSuccess, onRequestFail);*/
    }
   
    //Get the people picker resolved user name
    function getUserFromPicker()
    {  
var _PeoplePicker = $("span[class='sp-peoplepicker-userSpan']").attr('sid');      
        return _PeoplePicker;
    }

    // This function runs if the executeQueryAsync call succeeds.
    function onRequestSuccess() {  
 

var FirstName =userProfileProperties.get_userProfileProperties()['FirstName'];
$('input[title=FirstName]').attr(
       {value: FirstName});


var LastName=userProfileProperties.get_userProfileProperties()['LastName'];
$('input[title=LastName]').attr(
       {value: LastName});



var DisplayName=userProfileProperties.get_userProfileProperties()['PreferredName'];
$('input[title=DisplayName]').attr(
       {value: DisplayName});


var WorkPhone=userProfileProperties.get_userProfileProperties()['WorkPhone'];
$('input[title=WorkPhone]').attr(
       {value: WorkPhone});


var WorkEmail=userProfileProperties.get_userProfileProperties()['WorkEmail'];
$('input[title=WorkEmail]').attr(
       {value: WorkEmail});


var Manager=userProfileProperties.get_userProfileProperties()['Manager'];
Manager=Manager.split('|')[2];
$('input[title=Manager]').attr(
       {value: Manager});


var Office=userProfileProperties.get_userProfileProperties()['Office'];
$('input[title=Office]').attr(
       {value: Office});


var Group =userProfileProperties.get_userProfileProperties()['TFS-Group'];
$('input[title=Group]').attr(
       {value: Group});


var Division=userProfileProperties.get_userProfileProperties()['TFS-Division'];

$('input[title=Division]').attr(
       {value: Division});



var BusinessUnit=userProfileProperties.get_userProfileProperties()['TFS-BusinessUnit'];
$('input[title=BusinessUnit]').attr(
       {value: BusinessUnit});



var JobFamily=userProfileProperties.get_userProfileProperties()['TFS-JobFamily'];
$('input[title=JobFamily]').attr(
       {value: JobFamily});



var Functions=userProfileProperties.get_userProfileProperties()['TFS-Functions'];
$('input[title=Functions]').attr(
       {value: Functions});




var Department=userProfileProperties.get_userProfileProperties()['SPS-Department'];
$('input[title=Department]').attr(
       {value: Department});


    }

    // This function runs if the executeQueryAsync call fails.
    function onRequestFail(sender, args) {
        //$get("results").innerHTML = "Error: " + args.get_message();
    }


//People Picker On Change event







</script>

<!--<div id="results"> </div>-->