Look at the following procedure.

Step 1

Create a Web Part using Visual Studio 2013.

Create a Web Part using Visual Studio

Step 2

Open the ascx (MyFirstWebPartUserControl.ascx) and design your UI. Here I have created Employee details information.

Employee details information

The following is the design part of the code:

  1. <div>
  2. <table cellpadding="10">
  3. <tr>
  4. <td colspan="2" align="center">
  5. <label style="width: 200px; height: 50px; font-size: large; font: bold;">Employee Details</label>
  6. </td>
  7. </tr>
  8. <tr>
  9. <td>
  10. <label style="width: 100px; height: 50px; font-size: large; font: bold;">Employee ID</label>
  11. </td>
  12. <td>
  13. <input type="text" id="txtEmployeeId" style="width: 100px;" />
  14. </td>
  15. </tr>
  16. <tr>
  17. <td>
  18. <label style="width: 100px; height: 50px; font-size: large; font: bold;">First Name</label></td>
  19. <td>
  20. <input type="text" id="txtFirstName" style="width: 100px;" /></td>
  21. </tr>
  22. <tr>
  23. <td>
  24. <label style="width: 100px; height: 50px; font-size: large; font: bold;">Last Name</label></td>
  25. <td>
  26. <input type="text" id="txtLastName" style="width: 100px;" /></td>
  27. </tr>
  28. <tr>
  29. <td>
  30. <label style="width: 100px; height: 50px; font-size: large; font: bold;">State</label></td>
  31. <td>
  32. <input type="text" id="txtState" style="width: 100px;" /></td>
  33. </tr>
  34. <tr>
  35. <td>
  36. <label style="width: 100px; height: 50px; font-size: large; font: bold;">City</label></td>
  37. <td>
  38. <input type="text" id="txtCity" style="width: 100px;" /></td>
  39. </tr>
  40. <tr>
  41. <td>
  42. <input type="button" id="btnSave" value="Save" onclick="createListItem();" />
  44. </td>
  45. <td>
  46. <input type="button" id="btnCancel" value="Cancel" onclick="ClearFields();" />
  47. </td>
  48. </tr>
  49. </table>
  51. </div>

The following is the JavaScript Code:

  1. <script type="text/javascript">
  2. var siteUrl = 'http://ils-jacobr:35526';
  4. function createListItem() {
  5. var empId = document.getElementById('txtEmployeeId').value;
  6. var firstName = document.getElementById('txtFirstName').value;
  7. var lastName = document.getElementById('txtLastName').value;
  8. var state = document.getElementById('txtState').value;
  9. var city = document.getElementById('txtCity').value;
  10. var clientContext = new SP.ClientContext(siteUrl);
  11. var oList = clientContext.get_web().get_lists().getByTitle('EmployeeDetails');
  12. var itemCreateInfo = new SP.ListItemCreationInformation();
  13. this.oListItem = oList.addItem(itemCreateInfo);
  14. oListItem.set_item('EmployeeID', empId);
  15. oListItem.set_item('FirstName', firstName);
  16. oListItem.set_item('LastName', lastName);
  17. oListItem.set_item('City', city);
  18. oListItem.set_item('State', state);
  19. oListItem.update();
  20. clientContext.load(oListItem);
  21. clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
  22. }
  24. function onQuerySucceeded() {
  26. alert('Item created Successfully !!!!');
  27. document.getElementById('txtCity').value = "";
  28. document.getElementById('txtEmployeeId').value = "";
  29. document.getElementById('txtFirstName').value = "";
  30. document.getElementById('txtLastName').value = "";
  31. document.getElementById('txtState').value = "";
  32. }
  34. function onQueryFailed(sender, args) {
  36. alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  37. }
  38. function ClearFields() {
  39. document.getElementById('txtCity').value = "";
  40. document.getElementById('txtEmployeeId').value = "";
  41. document.getElementById('txtFirstName').value = "";
  42. document.getElementById('txtLastName').value = "";
  43. document.getElementById('txtState').value = "";
  44. }
  45. </script>

Step 3

Build and deploy your the solution.

Deploy

Step 4

Go to your SharePoint site and create one page under site pages. Add your web part to that page.

Add your web part in that page

Step 5

Enter the Employee details and click the Save button.

Employee details

click save button

Step 6

Go to your List and the item will display.

display

Summary

This article showed how programmatically add a list item to a SharePoint List using JavaScript.