SharePoint Online: Add item to SharePoint list using JavaScript Object Model JSOM

Article
1/17/2024

Introduction:

Here we will discuss about 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 few fields like:

Title
FirstName
LastName

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.

https://www.enjoysharepoint.com/wp-content/uploads/2018/09/SharePoint_2013_add_item_to_list_using_jsom.png

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

https://www.enjoysharepoint.com/wp-content/uploads/2018/09/SharePoint_2013_add_item_to_list_using_javascript_client_object_model.png

References:

If you want to read about Microsoft flow and Rest API, you can check below articles:

Conclusion:

Here we discussed how we can insert an item to a SharePoint online list using JavaScript object model (jsom).

Share via