Add List Item in SharePoint List Using JavaScript

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();" />  
  43.   
  44.             </td>  
  45.             <td>  
  46.                 <input type="button" id="btnCancel" value="Cancel" onclick="ClearFields();" />  
  47.             </td>  
  48.         </tr>  
  49.     </table>  
  50.   
  51. </div>

The following  is the JavaScript Code:

  1. <script type="text/javascript">  
  2.     var siteUrl = 'http://ils-jacobr:35526';  
  3.   
  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(thisthis.onQuerySucceeded), Function.createDelegate(thisthis.onQueryFailed));  
  22.     }  
  23.   
  24.     function onQuerySucceeded() {  
  25.   
  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.     }  
  33.   
  34.     function onQueryFailed(sender, args) {  
  35.   
  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.