Insert Item In SharePoint List By Using JavaScript Object Model (JSOM)

In this blog, you will learn how to insert an item in SharePoint List by using JavaScript Object Model (JSOM).

Problem Statement

 
Insert an item into a SharePoint list by using the JavaScript Object Model (JSOM).
 

Solution

 
Note
Use the attached document for graphical representation.
 
Step 1
 
Create a SharePoint List named “Login Details”.
 
Step 2
 
Go to setting and create a column named "UserName", as shown in the below table.
 
Step 3
 
Create a second column as "Password".
 
sr no
Column Name
Column Type
1
UserName
Single Line of text
2
Password
Single Line of text
  
Step 4
 
Add a new page to the site – To add a new page, click on the gear icon on the top left side of the page and click “Add a Page”.
 
Step 5
 
Name the page as “JSOM” and click "Create".
 
Step 6
 
The JSOM page will open in edited mode. Click on Insert >> Media and Content  >> Script Editor, as shown below and click on the "Add" button.
 
Step 7
 
Click on "Edit web part" and then, click on "Edit snippet".
 
Step 8
 
Paste the following code in the code editor window.
 
 
a. Be careful to insert your home site URL in the below code.
 
var siteUrl = 'your site.com/teams/Yout site';  
  1. <html>  
  2. <head>  
  3. <Title>JSOM To insert Record</Title>  
  4. <body>  
  5. <div>  
  6. <table cellpadding="10">  
  7. <tr>  
  8. <td colspan="2" align="center">  
  9. <label style="width: 250px; height: 50px; font-size: large; font: bold;">Login Details</label>  
  10. </td>  
  11. </tr>  
  12. <tr>  
  13. <td>  
  14. <label style="width: 150px; height: 80px; font-size: large; font: bold;">User Name</label></td>  
  15. <td>  
  16. <input type="text" id="txtUserName" style="width: 150px;" /></td>  
  17. </tr>  
  18. <tr>  
  19. <td>  
  20. <label style="width: 150px; height: 80px; font-size: large; font: bold;">Password</label></td>  
  21. <td>  
  22. <input type="text" id="txtPassword" style="width: 150px;" /></td>  
  23. </tr>  
  24. <tr>  
  25. <td>  
  26. <input type="button" id="btnSave" value="Submit" onclick="InsertintGetList();" />  
  27. </td>  
  28. <td>  
  29. <input type="button" id="btnCancel" value="Cancel" onclick="ClearData();" />  
  30. </td>  
  31. </tr>  
  32. </table>  
  33. </div>  
  34. </body>  
  35. </html>  
  36. <script type="text/javascript">  
  37. var siteUrl = 'your site.com/teams/Yout site';  
  38. function InsertintGetList() {  
  39. var UserName = document.getElementById('txtUserName').value;  
  40. var Password = document.getElementById('txtPassword').value;  
  41. var clientContext = new SP.ClientContext(siteUrl);  
  42. var GetList = clientContext.get_web().get_lists().getByTitle('LoginDetails');  
  43. var itemCreateInfo = new SP.ListItemCreationInformation();  
  44. this.GetListItem = GetList.addItem(itemCreateInfo);  
  45. GetListItem.set_item('UserName', UserName);  
  46. GetListItem.set_item('Password', Password);  
  47. GetListItem.update();  
  48. clientContext.load(GetListItem);  
  49. clientContext.executeQueryAsync(Function.createDelegate(thisthis.onQuerySucceeded), Function.createDelegate(thisthis.onQueryFailed));  
  50. }  
  51. function onQuerySucceeded() {  
  52. alert('Record Inserted');  
  53. document.getElementById("txtUserName").value = "";  
  54. document.getElementById("txtPassword").value = "";  
  55. }  
  56. function onQueryFailed(sender, args) {  
  57. alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  58. }  
  59. function ClearData() {  
  60. document.getElementById('txtUserName').value = "";  
  61. document.getElementById('txtPassword').value = "";  
  62. }  
  63. </script>  
  64.    
Step 9
 
Insert the record and click on the "Save" button.
 
Check the list "Login Details" with new updated Item.
 
Happy Coding!