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>


2 comments:

Unknown said...

Hi, Can you help me in storing data with html tags using the same update method.

Thanks In Advance

Unknown said...

Hello Sir,
I wanted to how to perform add new operation for Lookup,Dropdown and People picker field.This is my new assignment.Please can you guide me for the same.

Time Intelligence Functions in Power BI: A Comprehensive Guide

Time intelligence is one of the most powerful features of Power BI, enabling users to analyze data over time periods and extract meaningful ...