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>
 
$(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.




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



References:

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

- Get All Attachments From SharePoint 2013 List Item using Rest API

- Microsoft Flow Send approval email when a new item is added demo

- Microsoft Flow Example: Send a customized email when a new SharePoint list item is added

Conclusion:

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