Submit web part field data to list using JavaScript

Hello,

I am using Napa in Office365 to develop a web age with several textboxes that I want to have submit their values to my SharePoint list onbuttonclick.

I've tried a couple different methods, and like others who tried them as well (based on the comments at the bottom of the blogs) ran into issues.

Below is what I am trying currently, but get no response; no success or failure message.

'use strict';
var siteUrl = 'https://mysitename-public.sharepoint.com/';

function createListItem() {

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('crudtest');
        
    var itemCreateInfo = new SP.ListItemCreationInformation();
    var oListItem = oList.addItem(itemCreateInfo);
        
    oListItem.set_item('Title', 'My New Item');
    oListItem.update();

    clientContext.load(oListItem);
        
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {

    alert('Item created');
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

February 27th, 2015 1:18pm

Hi,

You can try the above code block with one change at the first line.

var clientContext = SP.ClientContext.get_current(); //gets the current context

Please try to debug your code if the problem still exists.

Thanks.

Free Windows Admin Tool Kit Click here and download it now
March 2nd, 2015 7:28am

No change.
March 2nd, 2015 3:44pm

Hi,

From your description, my understanding is that your code does not give response in your environment.

I test your issue in my environment, and it works well.

Add below code in Default.aspx:

<p>
Items
<br />
<input type="button" id="createitembutton" value="Create Item"/>
</p>

Add below code in App.js:

var hostWebUrl;
var appWebUrl;

$(document).ready(function () {
                hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
                appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
                getUserName();
                $("#createitembutton").click(function (event) {
                                createitem();
                                event.preventDefault();
                });
});

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];
                                }
                }
}

function createitem() {
                // Retrieve the list that the user chose, and add an item to it.
                //var selectListBox = document.getElementById("selectlistbox");
                //var selectedListTitle = selectListBox.value;
                var ctx = new SP.ClientContext(appWebUrl);
                var appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);

                var web = appCtxSite.get_web(); //Get the Web 

                var selectedList = web.get_lists().getByTitle("ListC");

                var listItemCreationInfo = new SP.ListItemCreationInformation();
                var newItem = selectedList.addItem(listItemCreationInfo);
                //var listItemTitle = document.getElementById("createitembox").value;
                newItem.set_item('Title', "My New Item");
                newItem.update();
                ctx.load(newItem);
                ctx.executeQueryAsync(onItemCreationSuccess, onItemCreationFail);
                }

function onItemCreationSuccess() {
                // Refresh the list of items.
                alert("Item created");
}

function onItemCreationFail(sender, args) {
                // The item couldnt be created  display an error message.
                alert('Failed to create the item. ' + args.get_message());
}

And you could refer to this article:

SharePoint 2013 Apps using JavaScript Object Model (JSOM)

http://www.dotnetcurry.com/showarticle.aspx?ID=1028.

Best Regards



Free Windows Admin Tool Kit Click here and download it now
March 3rd, 2015 7:09am

I've tried this in Napa/Office365 AND SharePoint 2010 using a content editor web part, and in each case, not even an error message.

I tried it in the web part to remove Napa/Office 365 as a variable. I have not found a single blog that actually has a working solution based on the comments in the blogs.

March 4th, 2015 4:20pm

Hi,   I do not quite understand your last replay. Could you describe your requirement clearly?  

Besides, the screenshot below is where is my code in my environment.

The screenshot below is my result with the code:

Best Regards,

Vincent Han

Free Windows Admin Tool Kit Click here and download it now
March 5th, 2015 10:54am

Hi techieplaya,

Any update?

Best Regards,

Dennis Guo

March 9th, 2015 8:55pm

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics