Inserting the Data into SharePoint List with WebService

We have a design requirement where we need to show a SharePoint form which is fetching data from multiple lists and then the user should be able to insert the data into multiple list. The constraint was not to use SharePoint Object Model. We should achieve this only by OOB functionality.

So showing the data from multiple list is not tough. We have place multiple web parts getting the data from the list. The challenge was to insert the data into multiple list. By default it can update the data into only one list.

To solve this issue we called SharePoint Web Service in the JavaScript Code. This Code will insert the data into SharePoint List with the help of Web Service through JavaScript. So we do not need to use any Object Model Code for this purpose:

The code marked in italics needs to be changed. I am inserting the data into TestList in which there are two columns ID and Title.

Here is the code:

function SaveListItem()
{
var soapRequest = '<?xml version="1.0" encoding="utf-8"?>' +
'<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">' +
' <soap12:Body>'+
' <UpdateListItems xmlns="http://schemas.microsoft.com/sharepoint/soap/">'+
' <listName>TestList</listName>'+
' <updates>'+
'<Batch OnError="Continue">'+
' <Method ID="1" Cmd="New">'+
' <Field Name="ID">New</Field>'+
' <Field Name="Title">TestData</Field>'+
' </Method>'+
'</Batch>'+
' </updates>'+
' </UpdateListItems>'+
' </soap12:Body>'+
'</soap12:Envelope>';

xmlHttp=new XMLHttpRequest();
xmlHttp.open('post', 'http://ServerName/SiteCollection/_vti_bin/Lists.asmx', true);
xmlHttp.setRequestHeader('Content-Type','application/soap+xml; charset=utf-8');

xmlHttp.send(soapRequest);
}


You can call the above code from a button with the following code:

<input type="button" value="Save List Item" onclick="javascript:SaveListItem();">

Get the code from: