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.



Now open the CRUDJS.aspx page.

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

HTML Code

<div id="insert">
    <table>
        <tr>
            <td> Employee Name: </td>
            <td>
                <input type="text" id="txtname" placeholder="Employee Name" /> </td>
        </tr>
        <tr>
            <td> Designation: </td>
            <td>
                <input type="text" id="txtdesignation" placeholder="Employee Name" /> </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <button type="button" id="buttoninsert" onclick="insert()">Insert</button>
            </td>
        </tr>
    </table>
</div>

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.



Going to insert some data into it.



Now open the Employee list.



Now update the data.

Code

<div id="update">
    <table>
        <tr>
            <td> ID </td>
            <td>
                <input type="text" id="txtid" placeholder="id" /> </td>
        </tr>
        <tr>
            <td> Employee Name: </td>
            <td>
                <input type="text" id="txtnameup" placeholder="Employee Name" /> </td>
        </tr>
        <tr>
            <td> Designation: </td>
            <td>
                <input type="text" id="txtdesignationup" placeholder="Employee Name" /> </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <button type="button" id="buttonupdate" onclick="update()">Update</button>
            </td>
        </tr>
    </table>
</div>

JS

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