none
SharePoint online Adding into a list from an HTML form

    Question

  • Hi Guys, I have been struggling with this thing for day now, 

    I am trying to save some form details into a list and i just can not seem to make it work can any one tell me if there is something wrong with my code here.. I have set permissions to Full Control .

    'use strict';

    //SP.SOD.executeFunc('sp.js', 'SP.ClientContext', createVisitorDetails);

    function manageQueryStringParameter(paramToRetrieve) {
        var params =
        document.URL.split("?")[1].split("&");
        var strParams = "";
        for (var i = 0; i < params.length; i = i + 1) {
            var singleParam = params[i].split("=");
            if (singleParam[0] == paramToRetrieve) {
                return singleParam[1];
            }
        }
    }
    var context = SP.ClientContext.get_current();
    var user = context.get_web().get_currentUser();
       
        






     function createVisitorDetails() {
         var name = $("#name").val();
         var surname = $("#surname").val();
         var email = $("#email").val();
         var msg = $("#message").val();

           // var context = SP.ClientContext.get_current();
           
          
         alert("-----" + name + "\n" + surname + "\n" + email + "\n" + msg);
         //Get app web url
         var hostWebUrl = decodeURIComponent(manageQueryStringParameter("SPHostUrl"));
         //Get Host Web URL

         var appWebUrl = decodeURIComponent(manageQueryStringParameter("SPAppWebUrl"));

           
           
            //Creating the Client Content object using the Url
            var ctx = new SP.ClientContext(appWebUrl);
            var appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);
            //Get the Web site
            var web = appCtxSite.get_web();
           
            //Get the List using its name
            var list = web.get_lists().getByTitle("VisitorsQueries");
            
            var listCreationInformation = new SP.ListItemCreationInformation(); //Object for creating Item in the List
            var listItem = list.addItem(listCreationInformation);
            if (listCreationInformation)
            {
                alert("Object existing");
            }
            else { alert("Does not exist"); }
            listItem.set_item("Name", name);
            listItem.set_item("Surname", surname);
            listItem.set_item("Email", email);
            listItem.set_item("Message", msg);
            
            listItem.update(); //Update the List Item
        
            ctx.load(listItem);
            //Execute the batch Asynchronously
            ctx.executeQueryAsync(
                Function.createDelegate(this, success),
                Function.createDelegate(this, fail)
               );

       }

       function success() {
           alert("Successfully inserted");
       }

       function fail() {
           alert("Could not insert into the list");
       }
       
       

    Friday, May 20, 2016 10:11 AM

All replies

  • What error you get when you debug this code in developer tool bar?

    Rewrite your fail method like this,

    function fail(sender, args) {
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }


    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.

    Friday, May 20, 2016 10:55 AM
  • I get the error that says , Could not insert into the list, of which it is the error message i gave to it when it does not. other than that there is no error beside that it is not saving into the list. i want to know why and how can i make it save. 

    Friday, May 20, 2016 11:45 AM
  • It says , unExpected response from the Server, 
    Friday, May 20, 2016 11:49 AM
  • Refer to this blog, for making cross domain call. Use the SP.RequestExecutor.js" as given in the code sample.

    executor.executeAsync({ createVisitorDetails();});

    https://blogs.msdn.microsoft.com/nickpinheiro/2015/01/30/build-a-sharepoint-hosted-app-to-access-list-data-in-your-host-web-using-the-rest-api-in-10-easy-steps/


    ---
    Rajesh
    rjesh.com| @rjesh
    You don't need to buy me a beer, if helpful just smile, vote, and mark it as answer.

    Friday, May 20, 2016 12:32 PM
  • I can see i am getting close to getting it right, but i don't want to use REST APIs, i want to use JSOM only.
    Friday, May 20, 2016 1:16 PM
  • Hi Zolile,

    Here i mentioned the sample code to insert the item to SharePoint host web list using app model,

    1. var hostWebUrl;  
    2. var appWebUrl;  
    3. // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model  
    4. $(document).ready(function ()   
    5. {      
    6.     hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));    
    7.     appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));  
    8.     //Insert method  
    9.     InsertItemToList();  
    10.  });  
    11.   
    12. //This function is used to get the hostweb url  
    13. function manageQueryStringParameter(paramToRetrieve)   
    14. {  
    15.     var params =  
    16.     document.URL.split("?")[1].split("&");  
    17.     var strParams = "";  
    18.     for (var i = 0; i < params.length; i = i + 1)   
    19.     {  
    20.         var singleParam = params[i].split("=");  
    21.         if (singleParam[0] == paramToRetrieve)   
    22.         {  
    23.             return singleParam[1];  
    24.         }  
    25.      }  
    26.  }  
    27.   
    28.   
    29. //Insert List Item to SP host web  
    30. function InsertItemToList()   
    31. {      
    32.    var ctx = new SP.ClientContext(appWebUrl);//Get the SharePoint Context object based upon the URL  
    33.    var appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);  
    34.    var web = appCtxSite.get_web(); //Get the Site   
    35.    var list = web.get_lists().getByTitle(listName); //Get the List based upon the Title  
    36.    var listCreationInformation = new SP.ListItemCreationInformation(); //Object for creating Item in the List  
    37.    var listItem = list.addItem(listCreationInformation);  
    38.    listItem.set_item("Title""Title1");   
    39.    listItem.update(); //Update the List Item  
    40.    ctx.load(listItem);  
    41.    //Execute the batch Asynchronously  
    42.    ctx.executeQueryAsync(  
    43.    Function.createDelegate(this, success),  
    44.    Function.createDelegate(this, fail)  
    45.    );  
    46. }  
    47.   
    48. function success()  
    49. {  
    50.    alert("Item added successfully");  
    51. }  
    52.   
    53. function fail(sender, args)   
    54. {  
    55.    alert('Failed to get user name. Error:' + args.get_message());  
    56. }  

    Reference :  http://www.c-sharpcorner.com/UploadFile/93cb27/insert-an-items-to-sharepoint-host-web-list-using-sharepoint/


    Thanks, Kaviya (Please remember to click “Mark as Answer” on the post that helps you) Blog:

    Tuesday, May 31, 2016 7:05 AM
  • Hi Zolile,

    Is there any update?


    Thanks, Kaviya Balasubramanian | Microsoft MVP - Office Servers and Services (Please remember to click “Mark as Answer” on the post that helps you)

    Wednesday, August 24, 2016 1:30 PM