Showing posts with label sharepoint list item. Show all posts
Showing posts with label sharepoint list item. Show all posts

Saturday, November 30, 2013

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>