How to call web service on Text box Lost Focus Event from javascript? – SharePoint Custom Application

Requirement : 

On blur event of text box, need to do a calculation which is written in an asmx web service.

Solution : 

On Page Load add the onblur event for the required text box like below: 

txt_Quantity.Attributes.Add(“onblur”, “javascript:LostFocusTotalCalc(‘” + txt_Quantity.ClientID + “‘,'” + txt_TotalQty.ClientID + “‘)”);


txt_Quantity is the input value we are going to pass to our web service

txt_TotalQty is the output text box we are going to set the calculated value

To call the web service from Java Script use the below code : 

function LostFocusTotalCalc(txtControlInput, txtControlOutput) {
var ctrMsg = document.getElementById(txtControlInput);
var strMsg = ctrMsg.value;

var a = null;
if (window.ActiveXObject) {
a = new ActiveXObject(“Microsoft.XMLHTTP”);
else if (window.XMLHttpRequest) {
a = new XMLHttpRequest();
else {
throw new Error(“XMLHttpRequest not supported”);

if (a == null) return null;

a.Open(“POST”, “/_layouts/Factory_Custom_Apps/CalculateService.asmx”, false);
a.setRequestHeader(“Content-Type”, “text/xml; charset=utf-8”);
a.setRequestHeader(“SOAPAction”, “”);
var d = “” + strMsg + “”;

var xmlDoc = a.responseXML;

document.getElementById(txtControlOutput).value = xmlDoc.text.toString();


In the above example, the xml output is in single node. Because of this reason I am taking the value directly from the xml output (xmlDoc.tex).

If you have parent & child nodes in your xml output, use the below code:

var elmValue = xmlDoc.getElementsByTagName(“Value”);
for (i = 0; i < elmValue.length; i++) {
if (elmValue[i].parentNode.parentNode.parentNode.childNodes[2].text == ‘NodeTagName’) {
strName = elmValue[i].childNodes[0].nodeValue;


About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: