Adding Item to SharePoint list using Jquery and SPServices

In this article I am going to show how to add list item to a SharePoint list using Jquery.
Prerequisites:

1. Create a SharePoint list (in my case I just created a list with name "testlist")

2. create a new page and insert a content editor webpart.

3. By default my "testlist" is created with Title field, so to make this article simple, I will be adding only Title filed from Jquery.

4. Now add below code to content editor webpart in Edit Source Mode

TODO:

Place one HTML textbox to enter the title and One button to add the text box value to list when clicked.

HTML:


<table>

<tr>

<td><strong>List Item to be added</strong></td>

<td><input id="txtTitle" name="txtTitle" type="text" /></td>

</tr><tr>

<td><input name="ADD" id="btnADD" type="submit" value="Add Item to List" /></td></tr>

</table>
In order to work with Jquery and Sharepoint add below references for Jquery or download the files online and refer from your style library.

I will be referring online jquery.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.js "></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery.SPServices-0.7.2.js "></script>

Script :
<script type="text/javascript">

        $(document).ready(function () {

            $("#btnAdd").click(function () {
                var title = $("#txtTitle").val();
                AddListItem(title);
            });

        });

        function AddListItem(TitleField) {
            $().SPServices({
                operation: "UpdateListItems",
                async: false,
                batchCmd: "New",
                listName: "testlist",
                valuepairs: [["Title", TitleField]],
                completefunc: function (xData, Status) {
                    alert("Data Saved! and Please check your List");
                }
            });
        }
    </script>