Insert And Update SharePoint List Using JavaScript

Here are the steps,

Create a team site

Open Visual studio, then Create a Empty SharePoint 2013 project and Add a Visual Webpart.

Visual Webpart

Now open the CRUDJS.aspx page.

First step is to insert some data into the SharePoint list.

HTML Code

Add Script tag in your page.

JS

var siteurl = '/sites/JS';
function insert()
{
var clientContext = new SP.ClientContext(siteurl); // Get SPSITEURL
var list = clientContext.get_web()
.get_lists()
.getByTitle('Employee'); // Get SP list
var itemCreateInfo = new SP.ListItemCreationInformation();
var value1 = document.getElementById('txtname')
.value;
/Get value from input element
var value2 = document.getElementById('txtdesignation')
.value;
/Get value from input element
this.oListItem = list.addItem(itemCreateInfo);
/Adding list items
oListItem.set_item('Title', value1);
oListItem.set_item('designation', value2);
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded()
{
alert('Item created Successfully');
}
function onQueryFailed(sender, args)
{
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Now deploy the project.

Open a SharePoint site.

Add a Deployed Webpart into it.

Webpart

Going to insert some data into it.

data

Now open the Employee list.

item

Now update the data.

Code

function update()
{
var clientContext = new SP.ClientContext(siteurl1);
var oList = clientContext.get_web()
.get_lists()
.getByTitle('Employee');
var id = document.getElementById('txtid')
.value;
this.oListItem = oList.getItemById(id);
var value1 = document.getElementById('txtnameup')
.value;
var value2 = document.getElementById('txtdesignationup')
.value;
oListItem.set_item('Title', value1);
oListItem.set_item('designation', value2);
oListItem.update();
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceededs), Function.createDelegate(this, this.onQueryFaileds));
}
function onQuerySucceededs()
{
alert('Item updated!');
}
function onQueryFaileds(sender, args)
{
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
} < /script>

Deploy the code and run

Going to update ID = 24.

So item has been updated successfully

employee