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';
  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(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
  23. }
  25. function onQuerySucceeded()
  26. {
  27. alert('Item created Successfully');
  28. }
  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(this, this.onQuerySucceededs), Function.createDelegate(this, this.onQueryFaileds));
  18. }
  20. function onQuerySucceededs()
  21. {
  22. alert('Item updated!');
  23. }
  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