Post
Ask Question

Insert 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(this, this.onQuerySucceeded), Function.createDelegate(this, this.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!