Insert Items into List by using REST API in SharePoint 2013

Kaarthikeya 11/13/2014 01:28:00 am 8 comments
 Hi All,

In a following post we will see how to add Items to the List by using REST API in Share Point 2013 On Premises.

Creating list items is little bit complex if you  are new to REST API, here we need few important info
  • List Item Type
  • REQUEST DIGEST value to prevent replay attacks.


Our Page have two text boxes and submit button. On click of submit button text box values are inserts into “TestList” (In Mycase).



Please find the below Code Snippet.

<html>
<head>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        var context;
        var web;
        var Url;
        var listItemEntity;

        $(document).ready(function () {
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', FunctionReady);
            ItemSubmit();
        });


        function ItemSubmit() {
            $("#btnSubmit").click(function () {
                //reading text box values
                var titleValue = $("#title").val();
                var columnValue = $("#column").val();
                AddItemToList(listItemEntity, titleValue, columnValue);
            });
        }

        function FunctionReady() {
            context = new SP.ClientContext.get_current();
            web = context.get_web();
            context.load(web);
            context.executeQueryAsync(onRequestSuccess, onRequestFailure);
        }

        function onRequestSuccess() {
            Url = web.get_url();
            GetListItemEntity(Url);
        }
        function onRequestFailure(sender, args) {
            alert("Error Occured:" + args.get_message());
        }

        function GetListItemEntity(webUrl) {
            var queryUrl = webUrl + "/_api/lists/getbytitle('TestList')?$select=ListItemEntityTypeFullName";
            $.ajax({
                url: queryUrl,
                method: "GET",
                headers: { "Accept": "application/json;odata=verbose" },
                success: onEntitySuccess,
                error: onEntityFailure
            });
        }


        function onEntitySuccess(data) {
            listItemEntity = data.d.ListItemEntityTypeFullName;
        }
        function onEntityFailure(err) {
            alert(err.statusText);
        }

        function AddItemToList(r, titleValue, colValue) {
            try {

                var queryUrl = Url + "/_api/lists/GetByTitle('TestList')/items";

                $.ajax({
                    url: queryUrl,
                    type: "POST",
                    contentType: "application/json;odata=verbose",
                    data: JSON.stringify(
                        {
                            '__metadata': {
                                'type': r
                            },
                            'Title': titleValue,
                            'SampleColumn': colValue
                        }),
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "X-RequestDigest": $("#__REQUESTDIGEST").val()
                    }, success: onQuerySucess,
                    error: onQueryFailure
                });
            }
            catch (ex) {
                alert("Exception" + ex.message);
            }
        }

        function onQuerySucess() {
            alert('Item Added Successfully');
        }

        function onQueryFailure(error) {
            //alert("Failure:"+error.status+","+error.statusText);
            alert(JSON.stringify(error));
        }


    </script>
</head>
<body>
    Enter Title value:<input type="textbox" id="title">
    <br>
    <br>
    Enter Column Value:<input type="textbox" id="column">
    <br>
    <br>

    <input type="button" id="btnSubmit" value="Submit">
</body>
</html>
Final Out put :




You can download the same code from the below link,

Download Link:

https://sites.google.com/site/sharepointkitchenblog/AddItem.txt

Regarding REQUEST DIGEST , please check below Url

http://blogs.msdn.com/b/nadeemis/archive/2012/10/23/tip-handling-http-403-forbidden-when-querying-the-search-rest-service-using-the-postquery-method.aspx


 Hope this helps,

 Thank you..!!!

Related Post

8 comments:

  1. Unknown13 November 2014 at 05:24

    thanks

    ReplyDelete
  2. Anonymous16 February 2017 at 07:25

    superb broo!!!....thanks!!!!

    ReplyDelete
  3. Tahir3 April 2017 at 22:51

    First of all thanks Bro, nowadays I need same so thanks again , you example save my lot of time.

    ReplyDelete
  4. Anonymous10 October 2018 at 07:04

    Everything is working! Thank you very much!!!

    ReplyDelete
  5. Anonymous13 April 2019 at 00:05

    Hi,

    Thanks for this great help. Could you please suggest how to handle with dropdown field value set in list. Not able to set values in drop down instead of text fields.

    Thanks

    ReplyDelete
  6. Sigar Dave2 May 2019 at 04:19

    Great article!!!
    http://trickycoder.com

    ReplyDelete
  7. Unknown22 October 2019 at 04:35

    Hi,
    First of all, Thank You for your help. As I am new to this technology, I find it little difficult to understand few terms. It would be a great help if you mail me a explanation of the code or just comment about few functions and methods in the code.
    Thanking You

    ReplyDelete
  8. erectile dysfunction drug25 November 2020 at 07:41

    I think the admin of this site is truly working hard for his website, because here every information is quality based stuff.

    ReplyDelete