How to Creat List Items with jQuery and the SharePoint Web Services

In How to Call the SharePoint Web Services with jQuery I showed how to make a call to SharePoint’s Lists.asmx web service with the jQuery library to retrieve information about the Lists and Document Libraries that are available on a specific SharePoint Site. In the comments of that post, one of the readers asked if it would be possible to create a new item in a List using the same technique. Of course this is possible, you just need to make use of the UpdateListItems web method (yeah, the name of that method is not very intuitive). Here is a quick example!

First let’s create the UI (in this example I'll use a basic Site Page) to allow the user to enter a Title for the new task, and a button to do the action.

<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderMain">
<p>
Task Title:
<input id="newTaskTitle" type="text" />
<input id="newTaskButton" type="button" value="Create Task" />
</p></asp:Content>

Next let’s create a Javascript function that will create a new item in a Task list. In the Javascript function I’m declaring two variables that will contain the XML which will be sent to the SharePoint Lists.asmx web service. The first variable (I called it batch) contains the CAML to create a new item. For simplicity the CAML only provides a value for the Title field, add more fields if you’d like. The second variable (called soapEnv) is the SOAP Envelope XML which wraps the batch XML. Notice that in the SOAP Envelope the name of the list is mentioned in which we’re going to create a new item (in this case the Task list). Finally the jQuery ajax function is used to POST the data to the Lists.asmx web service. (If you test this code make sure you update the url option with the URL of your site).

function CreateNewItem(title) {
var batch =
"<Batch OnError=\"Continue\"> \
<Method ID=\"1\" Cmd=\"New\"> \
<Field Name=\"Title\">" + title + "</Field> \
</Method> \
</Batch>";

var soapEnv =
"<?xml version=\"1.0\" encoding=\"utf-8\"?> \
<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \
xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" \
xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> \
<soap:Body> \
<UpdateListItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\"> \
<listName>Tasks</listName> \
<updates> \
" + batch + "</updates> \
</UpdateListItems> \
</soap:Body> \
</soap:Envelope>";

$.ajax({
url: "http://yoursite/_vti_bin/lists.asmx",
beforeSend: function(xhr) {
xhr.setRequestHeader("SOAPAction",
"http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");
},
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=utf-8"
});
}

The jQuery ajax function call has a complete option which points to a function, in this function you can process the result as follows:

function processResult(xData, status) {
alert(status);
}

The status parameter is a string which can be for example success or error. Finally in the ready event of the document, we'll hook up the click event of the button so the CreateNewItem function is called, with the value of the textbox as the parameter.

$(document).ready(function() {
$("#newTaskButton").click(function() {
CreateNewItem($("#newTaskTitle").val());
});
});

That’s it! If you put all the code in a simple Site Page, upload the page to a Document Library in a SharePoint site, and now you can create Task list items by only using Javascript! The sample code can be downloaded in the following zip file. The zip file also contains the jQuery library which you can upload to the same Document Library if it isn't already loaded with the help of the SmartTools.jQuery component for example.