Insert item to SharePoint Online list using JavaScript Object Model (jsom)

In this SharePoint jsom tutorial, we will discuss how to add or insert an item to the SharePoint Online list using JavaScript Object Model (jsom). In the same way, we can insert an item to the SharePoint 2013 list using jsom.

Here we have a SharePoint list as “ComapnyInfoList” in SharePoint online site which has below columns:

  • User Name (single-line text )
  • Address (Multiline textbox)
  • Gender (Choice)
  • Country (Choice / Dropdown list)
  • Submission Date (Date and Time)

Insert item to SharePoint Online list using JavaScript

Now, we will see how to insert an item to the SharePoint Online list using the JavaScript object model (jsom) in SharePoint Online or SharePoint 2013/2016.

Here, we will create the HTML file, JavaScript (.JS) file, and CSS file.

HTML File:

Below is the HTML file which contains our code.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/UserInfoJs.js"></script>
<meta charset="utf-8" />
<title>My Html</title>
</head>
<body>
<h2>Information Form</h2>
Username:<br>
<input type="text" name="Username" id="usrtxt" />
<br>
Password:<br>
<input type="password" name="password" id="usrpwd" />
<br>
EmailID:<br>
<input type="email" name="EmailID" id="usrid" />
<br>
Address:<br>
<textarea rows="4" cols="50" id="addtxt"></textarea>
<br>
Gender:<br>
<div id="gend">
<input type="radio" name="gender" value="Male" id="gen0" /> Male
<input type="radio" name="gender" value="Female" id="gen1" /> Female
</div>
<br />
<select id="dropcount">
<option value="1">India</option>
<option value="2">Pakistan</option>
<option value="3">Srilanka</option>
<option value="3">Australia</option>
</select>
<br />
SubmissionDate:<br />
<input type="date" id="SubmDate" title="Submitdate">
<br /><br />
<input type="submit" value="Submit" id="btnSubmit" />
<br />
<p id="pTitle"></p>
</body>
</html>

In the above HTML file, for each control, we have given the ID attribute so that we can retrieve the control values using jQuery and control ID.

JavaScript (.JS) File

Below is the JavaScript (.js) file which contains our JavaScript object model (JSOM) code.

$(document).ready(function () {
$("#btnSubmit").click(function () {
insertitemtolist();
});
});
function insertitemtolist() {
var username = $("#usrtxt").val();
var password = $("#usrpwd").val();
var emailId = $("#usrid").val();
var address = $("#addtxt").val();
var gender = $("input[name='gender']:checked").val();
var country = $("#dropcount option:selected").text();
var myDate = new Date($("input[title='Submitdate']").val());
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('CmpanyInfoList');
var item = new SP.ListItemCreationInformation();
var oListItem = oList.addItem(item);
oListItem.set_item('Title', username);
oListItem.set_item('Password', password);
oListItem.set_item('EmailID', emailId);
oListItem.set_item('Address', address);
oListItem.set_item('Gender', gender);
oListItem.set_item('Country', country);
oListItem.set_item('SubmissionDate', myDate);
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
$("#pTitle").html("successfully executed");
}
function onQueryFailed(sender, args) {
alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
}

Here we added the button click() function within the ready() function.

In the button click we are calling a JavaScript function insertitemtolist().

We can retrieve the SharePoint list using jsom code like below:

var oList = clientContext.get_web().get_lists().getByTitle('CmpanyInfoList');

Then we can set the values to the SharePoint list column like below:

oListItem.set_item('Title', username);

Then upload these two files (HTML File, JS File) in the Site Assets library in SharePoint Online.

Now, create a web part page and Edit the page and then click on Add a web part link.

Then you can add a content editor web part to the SharePoint web part page.

add item to sharepoint list using jsom
add item to sharepoint list using jsom

Once the user fill the form and click on the submit button, the data will be saved to the SharePoint Online list.

The data can be visible in the SharePoint list.

how to create the list items using jsom in sharepoint
how to create the list items using jsom in sharepoint

Read some SharePoint jsom tutorials:

Conclusion

In this SharePoint jsom tutorial, we discussed how to add or insert an item to the SharePoint Online list using JavaScript Object Model (jsom). In the same way, we can insert items to the SharePoint 2013/2016 list using jsom.

>