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>
Step 9
Insert the record and click on the "Save" button.
Check the list "Login Details" with new updated Item.
Happy Coding!