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 + “‘)”);

Here,

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”, “http://tempuri.org/CalcualteTotalFromMultiline”);
var d = “” + strMsg + “”;

a.Send(d);
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;
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.