How to update SharePoint List Item using JavaScript object model (JSOM)

This JSOM tutorial, we will discuss how to update a List Item by using JSOM (JavaScript Object Model) in SharePoint Online, SharePoint 2013 or SharePoint 2016.

Update SharePoint List Item using JavaScript

Here, I have a SharePoint list which has a few columns like below:

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

We will update the List item to the above list programmatically using jsom in SharePoint.

HTML Input Form:

Here I have created an HTML form according to the SharePoint list.

Here the HTML File Code named as (UserInfoHtml.html) is given below:

<!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/Update.js"></script>
<meta charset="utf-8" />
<title>My HTML Form</title>
</head>
<body>
<h2>Editing 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 />
Country:<br />
<select id="dropcount">
<option value="India">India</option>
<option value="Pakistan">Pakistan</option>
<option value="Srilanka">Srilanka</option>
<option value="Australia">Australia</option>
</select>
<br />
SubmissionDate:<br />
<input type="date" id="SubmDate" title="Submitdate">
<br /><br />
<input type="submit" value="Update" id="btnUpdate" />
<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 update the control values by ID using jsom.

JS Code:

Now create a .JS File whereas I created “UserInfoJs” which will have the JSOM Code to update the SharePoint Online list item.

The JS file Code(UserInfoJs.js) is given below:

$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
$("#btnUpdate").click(function () {
updateListItemByID();
});
});
var masterListItem;
function retrieveListItems() {
var id = GetParameterValues('MyID');
getitemsbyID(id);
}
function getitemsbyID(itemID) {
var clientContext = new SP.ClientContext.get_current();
var masterlist = clientContext.get_web().get_lists().getByTitle('CmpanyInfoList');
masterListItem = masterlist.getItemById(itemID);
clientContext.load(masterListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
$("#usrtxt").val(masterListItem.get_item('Title'));
$("#usrpwd").val(masterListItem.get_item('Password'));
$("#usrid").val(masterListItem.get_item('EmailID'));
$("#addtxt").html(masterListItem.get_item('Address'));
if (masterListItem.get_item('Gender') == "Male") {
$("#gen0").attr('checked', 'checked');
}
else if (masterListItem.get_item('Gender') == "Female") {
$("#gen1").attr('checked', 'checked');
}
$("#dropcount").val(masterListItem.get_item('Country'));
var now = new Date();
var today = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate();
$('#SubmDate').val(today);
}
function onQueryFailed(sender, args) {
alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}
function GetParameterValues(param) {
var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < url.length; i++) {
var urlparam = url[i].split('=');
if (urlparam[0] == param) {
return urlparam[1];
}
}
}
function updateListItemByID() {
var id = GetParameterValues('MyID');
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 oListItem = oList.getItemById(id);
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.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failue));
}
function success() {
alert('Item updated!');
}
function failue(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Here, we have updated the SharePoint list item, by using the Item by ID using JSOM Code.

Create a updateListItemByID() function for updating. Here I have retrieved all the List items by using JQuery. Now suppose we have to retrieve the “Title” value. So the code is given below-

var username = $("#usrtxt").val();

Similarly, I retrieved all the List item values like “drop down”, “radio button”, “date” etc by using their specific ID attributes with different JQuery Code.

Then after I set all the List item value by using the below code-

oListItem.set_item('Title', username);

Similarly, We can set all the value like text field, drop down, radio button by using their specific Code using JQuery which is mentioned in above.

Then upload these two files(UserInfoHtml.html File, UserInfoJs.js File) in the “Site Assets”.

Once all the files are uploaded to Site Assets library. Then create a web part page and Edit the page and then click on “Add a web part” link, Then it will open the Web part categories in the ribbon. From the web part categories, select “Media and Content” and then from the Parts select “Content Editor”.

By clicking on the “Edit web part”, we can give the HTML File path into the edit web part. Then after the Html file will be displayed on that Web Part Page after the “Stop Editing” like the below screenshot-

update list item using jsom in sharepoint online
update list item using jsom in sharepoint online

Read some SharePoint jsom tutorials:

Conclusion

Hence in this tutorial, We discussed how to update a List Item by id using JSOM in SharePoint Online or SharePoint 2013/2016.

>