Client Script Requirement

Requirement 1:

On incident form we have caller field which is an reference field i want to create 4 more field which is in read only i.e. his Mobile Number,Email id, First Name, Last name. When ever we select the caller, it will autopopulate the above calller details.(using Glideajax and script include)

Object: Onload Client Script

Method: GlideAjax & GlideRecord & GlideForm

Youtube: https://youtu.be/49usHBAikUE

Script:

Client Script:
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading || newValue === '') {
g_form.setReadOnly('u_custom_mobile', true);
g_form.setReadOnly('u_first_name', true);
return;
}

alert('Script Run ' + g_form.getValue('caller_id'));
var gx = new GlideAjax('UserDetails');
gx.addParam('sysparm_name', 'callernameandphone');
gx.addParam('sysparm_user', g_form.getValue('caller_id'));
gx.getXML(getData);

function getData(response) {
var answer = response.responseXML.documentElement.getAttribute('answer');
if (answer) {
var tempValue = answer.toString().split('|');
g_form.setValue('u_custom_mobile', tempValue[0]);
g_form.setValue('u_first_name', tempValue[1]);
}
}

}

Server Side Script:
var UserDetails = Class.create();
UserDetails.prototype = Object.extendsObject(AbstractAjaxProcessor, {
callernameandphone: function() {
var usrId = this.getParameter('sysparm_user');
var gr = new GlideRecord('sys_user');
if(gr.get(usrId)){
return gr.getValue('mobile_phone')+'|'+gr.getValue('first_name');
}

},
type: 'UserDetails'
});