Insert item to SharePoint list using JavaScript Object Model JSOM in SharePoint Online

Insert item to SharePoint list using JavaScript Object Model JSOM
InfoPath alternatives for form designing SharePoint

In this article, we will discuss how we can add or insert an item to a SharePoint online list using JavaScript client object model (JSOM). The same code also works fine if you want to use in SharePoint 2016 or SharePoint 2013.

Here for this example, we have a list which has a few fields like:
Title
FirstName
LastName

Also, you can check my posts on:
– Create or Delete list using JavaScript Object Model in SharePoint online or SharePoint 2013

– Steps to create a result source and use custom result source in content search web part in SharePoint online

– Microsoft Flow Copy files from one SharePoint Online account or folder to another Office 365

So here let us take 3 textboxes (each one for Title, FirstName, and LastName) and one button. On click of the button, the data should be saved to the list.

Let us put both the HTML code as well as the jsom code inside a script editor web part which we can add inside a web part page.

HTML Code:

<h2>Add Items to Employee List</h2>

<div id=”AddListData”>

<div>

Title:

<br />

<input type=”text” id=”txtTitle” />

</div>

<div>

First Name:

<br />

<input type=”text” id=”txtFirstName” />

</div>

<br />

<div>

Last Name:

<br />

<input type=”text” id=”txtLastName” />

</div>

<br />

<div>

<input id=”btnSubmit” type=”button” value=”Submit” />

</div>

</div>

<div id=”divResult”></div>

JSOM Code:
In the Jsom code, we are calling the addListItem() function on the button click.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>

<script>

$(function () {

bindButtonClick();

});

function bindButtonClick() {

$(“#btnSubmit”).on(“click”, function () {

addListItem();

});

}

function addListItem() {

var title = $(“#txtTitle”).val();

var firstname = $(“#txtFirstName”).val();

var lastname = $(“#txtLastName”).val();

var clientContext = new SP.ClientContext();

var oList = clientContext.get_web().get_lists().getByTitle(‘Employees’);

var itemCreateInfo = new SP.ListItemCreationInformation();

this.oListItem = oList.addItem(itemCreateInfo);

oListItem.set_item(‘Title’, title);

oListItem.set_item(‘FirstName’, firstname);

oListItem.set_item(‘LastName’, lastname);

oListItem.update();

clientContext.load(oListItem);

clientContext.executeQueryAsync(

Function.createDelegate(this, this.onAddSucceeded),

Function.createDelegate(this, this.onAddFailed)

);

}

function onAddSucceeded(sender, args) {

$(“#divResult”).html(“Item successfully added!”);

}

function onAddFailed(sender, args) {

alert(‘Request failed. ‘ + args.get_message() +

‘\n’ + args.get_stackTrace());

}

</script>

Once you Save the page and put the data and click on Save, it will show the confirmation message once the data saved successfully to the list.

sharepoint 2013 add items to list using jsom
SharePoint 2013 add items to list using jsom

Now if you open the list, you can see the data inserted like below:

Insert item to SharePoint list using JavaScript Object Model JSOM
Insert item to SharePoint list using JavaScript Object Model JSOM

Hope this will be helpful.

Similar SharePoint 2013 Tutorials

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →

Leave a Reply