Insert And Update SharePoint List Using JavaScript

Here are the steps, 

Create a team site

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
  1. <div id="insert">  
  2.     <table>  
  3.         <tr>  
  4.             <td> Employee Name: </td>  
  5.             <td>  
  6.                 <input type="text" id="txtname" placeholder="Employee Name" /> </td>  
  7.         </tr>  
  8.         <tr>  
  9.             <td> Designation: </td>  
  10.             <td>  
  11.                 <input type="text" id="txtdesignation" placeholder="Employee Name" /> </td>  
  12.         </tr>  
  13.         <tr>  
  14.             <td></td>  
  15.             <td>  
  16.                 <button type="button" id="buttoninsert" onclick="insert()">Insert</button>  
  17.             </td>  
  18.         </tr>  
  19.     </table>  
  20. </div>  
Add Script tag in your page.

JS
  1. var siteurl = '/sites/JS';  
  2.   
  3. function insert()  
  4. {  
  5.     var clientContext = new SP.ClientContext(siteurl); // Get SPSITEURL  
  6.     var list = clientContext.get_web()  
  7.         .get_lists()  
  8.         .getByTitle('Employee'); // Get SP list   
  9.     var itemCreateInfo = new SP.ListItemCreationInformation();  
  10.     var value1 = document.getElementById('txtname')  
  11.         .value;  
  12.     /Get value from input element  
  13.     var value2 = document.getElementById('txtdesignation')  
  14.         .value;  
  15.     /Get value from input element  
  16.     this.oListItem = list.addItem(itemCreateInfo);  
  17.     /Adding list items  
  18.     oListItem.set_item('Title', value1);  
  19.     oListItem.set_item('designation', value2);  
  20.     oListItem.update();  
  21.     clientContext.load(oListItem);  
  22.     clientContext.executeQueryAsync(Function.createDelegate(thisthis.onQuerySucceeded), Function.createDelegate(thisthis.onQueryFailed));  
  23. }  
  24.   
  25. function onQuerySucceeded()  
  26. {  
  27.     alert('Item created Successfully');  
  28. }  
  29.   
  30. function onQueryFailed(sender, args)  
  31. {  
  32.     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  33. }  
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

  1. <div id="update">  
  2.     <table>  
  3.         <tr>  
  4.             <td> ID </td>  
  5.             <td>  
  6.                 <input type="text" id="txtid" placeholder="id" /> </td>  
  7.         </tr>  
  8.         <tr>  
  9.             <td> Employee Name: </td>  
  10.             <td>  
  11.                 <input type="text" id="txtnameup" placeholder="Employee Name" /> </td>  
  12.         </tr>  
  13.         <tr>  
  14.             <td> Designation: </td>  
  15.             <td>  
  16.                 <input type="text" id="txtdesignationup" placeholder="Employee Name" /> </td>  
  17.         </tr>  
  18.         <tr>  
  19.             <td></td>  
  20.             <td>  
  21.                 <button type="button" id="buttonupdate" onclick="update()">Update</button>  
  22.             </td>  
  23.         </tr>  
  24.     </table>  
  25. </div>  
JS
  1. function update()  
  2. {  
  3.     var clientContext = new SP.ClientContext(siteurl1);  
  4.     var oList = clientContext.get_web()  
  5.         .get_lists()  
  6.         .getByTitle('Employee');  
  7.     var id = document.getElementById('txtid')  
  8.         .value;  
  9.     this.oListItem = oList.getItemById(id);  
  10.     var value1 = document.getElementById('txtnameup')  
  11.         .value;  
  12.     var value2 = document.getElementById('txtdesignationup')  
  13.         .value;  
  14.     oListItem.set_item('Title', value1);  
  15.     oListItem.set_item('designation', value2);  
  16.     oListItem.update();  
  17.     clientContext.executeQueryAsync(Function.createDelegate(thisthis.onQuerySucceededs), Function.createDelegate(thisthis.onQueryFaileds));  
  18. }  
  19.   
  20. function onQuerySucceededs()  
  21. {  
  22.     alert('Item updated!');  
  23. }  
  24.   
  25. function onQueryFaileds(sender, args)  
  26. {  
  27.     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  28. } < /script>  
Deploy the code and run

Going to update ID = 24.

Deploy the code

So item has been updated successfully

employee