CSS Part
  1. <style>
  2. .ms-core-pageTitle {
  3. margin-top: 10px;
  4. margin-left: 400px;
  5. }
  7. div#leavefrom {
  8. background: antiquewhite;
  9. width: 800px;
  10. margin-left: 100px;
  11. padding-top: 50px;
  12. }
  14. table#leavefields {
  15. font-size: 15px;
  16. margin-left: 100px;
  17. }
  19. input#id1 {
  20. margin-left: 230px;
  21. margin-bottom: 15px;
  22. font-size: large;
  23. background-color: #e0e2e4;
  24. }
  26. input#btn {
  27. margin-bottom: 16px;
  28. background-color: #e0e2e4;
  29. }
  30. </style>
Js File
  1. var user = [];
  3. function GetUserId() {
  4. if (validate()) {
  5. $("div[class*='sp-peoplepicker-topLevel']").each(function() {
  6. if ($(this).find("span[class='ms-entity-resolved']").text().length > 0) {
  7. var endPointURLToGetUseID = _spPageContextInfo.webAbsoluteUrl + "/_api/web/siteusers?$select=Title,ID&$filter=Title eq '" + $(this).find("span[class='ms-entity-resolved']").text() + "'";
  8. $.ajax({
  9. url: endPointURLToGetUseID,
  10. type: "GET",
  11. dataType: "json",
  12. async: false,
  13. headers: {
  14. "accept": "application/json;odata=verbose"
  15. },
  16. success: callSuccessMethod,
  17. error: callFailureMethod
  18. });
  19. }
  20. });
  22. function callSuccessMethod(data, request) {
  23. $.each(data.d.results, function(key, val) {
  24. var GetId = val.Id;
  25. user.push([GetId]);
  26. });
  27. }
  29. function callFailureMethod(data, errCode, errMessage) {
  30. alert("Error: " + errMessage);
  31. }
  32. CreateListItem();
  33. }
  34. }
  36. function CreateListItem() {
  37. var clientContext = new SP.ClientContext('https://your site Url');
  38. var List = clientContext.get_web().get_lists().getByTitle('dynamiclist');
  39. var itemCreateInfo = new SP.ListItemCreationInformation();
  40. this.ListItem = List.addItem(itemCreateInfo);
  41. var Ename = document.getElementById("empname").value;
  42. var EmpID = document.getElementById("empid").value;
  43. var user1;
  44. ListItem.set_item('Employeename', Ename);
  45. ListItem.set_item('Empid', EmpID);
  46. if (user.length == 4) {
  47. ListItem.set_item('Approver1', user[1][0]);
  48. ListItem.set_item('Approver2', user[1][0]);
  49. ListItem.set_item('Approver3', user[2][0]);
  50. ListItem.set_item('Approver4', user[3][0]);
  51. ListItem.update();
  52. } else if (user.length == 3) {
  53. ListItem.set_item('Approver1', user[0][0]);
  54. ListItem.set_item('Approver2', user[1][0]);
  55. ListItem.set_item('Approver3', user[2][0]);
  56. ListItem.set_item('Approver4', user1)
  57. ListItem.update();
  58. } else if (user.length == 2) {
  59. ListItem.set_item('Approver1', user[0][0]);
  60. ListItem.set_item('Approver2', user[1][0]);
  61. ListItem.set_item('Approver3', user1);
  62. ListItem.set_item('Approver4', user1)
  63. ListItem.update();
  64. } else if (user.length == 1) {
  65. ListItem.set_item('Approver1', user[0][0]);
  66. ListItem.set_item('Approver2', user1);
  67. ListItem.set_item('Approver3', user1);
  68. ListItem.set_item('Approver4', user1)
  69. ListItem.update();
  70. } else if (user.length == 0) {
  71. ListItem.set_item('Approver1', user1);
  72. ListItem.set_item('Approver2', user1);
  73. ListItem.set_item('Approver3', user1);
  74. ListItem.set_item('Approver4', user1)
  75. ListItem.update();
  76. }
  77. clientContext.load(ListItem);
  78. clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
  79. }
  81. function onQuerySucceeded() {
  82. alert('Leave Applied Suceessfully');
  83. }
  85. function onQueryFailed(sender, args) {
  86. alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  87. }
  89. function validate() {
  90. var returnval = true;
  91. if (document.getElementById("empname").value == "") {
  92. alert("Please enter the Employee ID");
  93. returnval = false;
  94. } else if (document.getElementById("empid").value == "") {
  95. alert("Please enter the Department.");
  96. returnval = false;
  97. } else if (document.getElementById("txtlev").value == 0) {
  98. alert("Please Specify level of approval");
  99. returnval = false;
  100. } else if (document.getElementById("peoplePickerDiv1_TopSpan_HiddenInput").value == "" || document.getElementById("peoplePickerDiv1_TopSpan_HiddenInput").value == "[]") {
  101. alert("Please Specify Approver1");
  102. returnval = false;
  103. } else if (document.getElementById("txtlev").value == 2 && document.getElementById("peoplePickerDiv2_TopSpan_HiddenInput").value == "" || document.getElementById("peoplePickerDiv2_TopSpan_HiddenInput").value == "[]") {
  104. alert("Please Specify Approver2");
  105. returnval = false;
  106. } else if (document.getElementById("txtlev").value == 3 && document.getElementById("peoplePickerDiv3_TopSpan_HiddenInput").value == "" || document.getElementById("peoplePickerDiv3_TopSpan_HiddenInput").value == "[]") {
  107. alert("Please Specify Approver3");
  108. returnval = false;
  109. } else if (document.getElementById("txtlev").value == 4 && document.getElementById("peoplePickerDiv4_TopSpan_HiddenInput").value == "" || document.getElementById("peoplePickerDiv4_TopSpan_HiddenInput").value == "[]") {
  110. alert("Please Specify Approver4");
  111. returnval = false;
  112. }
  113. return returnval;
  114. }
Html File
  1. <html>
  3. <head>
  4. <script src="https://code.jquery.com/jquery-1.8.3.js"></script>
  5. <script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  6. <script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
  7. <script type="text/javascript" src="_layouts/15/sp.js"></script>
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js" type="text/javascript"></script>
  10. <script src='UR Url/SiteAssets/Holiday/moment.js'></script>
  11. <script src="UR url/sppeoplepicker.min.js"></script>
  12. <script src="Ur url/sppeoplepicker.js"></script>
  13. <script src="JS File Mentioned Above/dynamic.js"></script>
  14. <script type="text/javascript">
  15. $(document).ready(function() {
  16. $("#peoplePickerDiv1").spPeoplePicker();
  17. $("#peoplePickerDiv2").spPeoplePicker();
  18. $("#peoplePickerDiv3").spPeoplePicker();
  19. $("#peoplePickerDiv4").spPeoplePicker();
  20. });
  21. </script>
  22. <script type="text/javascript">
  23. function jsFunction(value) {
  24. var returnval = true;
  25. if (document.getElementById("txtlev").value == 0) {
  26. $('tr[id="approver1"]').hide();
  27. $('tr[id="approver2"]').hide();
  28. $('tr[id="approver3"]').hide();
  29. $('tr[id="approver4"]').hide();
  30. returnval = false;
  31. } else if (document.getElementById("txtlev").value == 1) {
  32. $('tr[id="approver1"]').show();
  33. $('tr[id="approver2"]').hide();
  34. $('tr[id="approver3"]').hide();
  35. $('tr[id="approver4"]').hide();
  36. returnval = false;
  37. } else if (document.getElementById("txtlev").value == 2) {
  38. $('tr[id="approver2"]').show();
  39. $('tr[id="approver1"]').show();
  40. $('tr[id="approver3"]').hide();
  41. $('tr[id="approver4"]').hide();
  42. returnval = false;
  43. } else if (document.getElementById("txtlev").value == 3) {
  44. $('tr[id="approver3"]').show();
  45. $('tr[id="approver1"]').show();
  46. $('tr[id="approver2"]').show();
  47. $('tr[id="approver4"]').hide();
  48. returnval = false;
  49. } else if (document.getElementById("txtlev").value == 4) {
  50. $('tr[id="approver4"]').show();
  51. $('tr[id="approver1"]').show();
  52. $('tr[id="approver2"]').show();
  53. $('tr[id="approver3"]').show();
  54. returnval = false;
  55. }
  56. return returnval;
  57. }
  58. </script>
  59. <script type="text/javascript" src="JS File Mentioned above/dynamic.js"></script>
  60. </head>
  62. <body>
  63. <div id="leavefrom">
  64. <table id="leavefields">
  65. <tr>
  66. <td>Level of approval</td>
  67. <td> <select id="txtlev" style="width: 99%; height: 90%" onmousedown="this.value='';" onchange="jsFunction(this.value);">
  68. <option value=0>Select</option>
  69. <option value=1>1</option>
  70. <option value=2>2</option>
  71. <option value=3>3</option>
  72. <option value=4>4</option>
  73. </select></td>
  74. </tr>
  75. <tr>
  76. <td width="3" nowrap>Employee Name </td>
  77. <td> <input type="text" id="empname"></td>
  78. </tr>
  79. <tr>
  80. <td>Employee id</td>
  81. <td><input type="text" id="empid"></td>
  82. </tr>
  83. <tr id="approver1" style="display:none">
  84. <td>Approver1</td>
  85. <td>
  86. <div id="peoplePickerDiv1"></div>
  87. </td>
  88. </tr>
  89. <tr id="approver2" style="display:none">
  90. <td>Approver2</td>
  91. <td>
  92. <div id="peoplePickerDiv2"></div>
  93. </td>
  94. </tr>
  95. <tr id="approver3" style="display:none">
  96. <td>Approver3</td>
  97. <td>
  98. <div id="peoplePickerDiv3"></div>
  99. </td>
  100. </tr>
  101. <tr id="approver4" style="display:none">
  102. <td>Approver4</td>
  103. <td>
  104. <div id="peoplePickerDiv4"></div>
  105. </td>
  106. </tr>
  107. <tr>
  108. <td><input type='button' id='id1' value='Submit' onclick="GetUserId();" /></td>
  109. <td><input type='button' value='Cancel' id='btn' onclick="cancel();" /></td>
  110. </tr>
  111. </table>
  112. </div>
  113. </body>
  115. </html>
Here, I am using Dynamic list as My list.
Employeename, Empid, Approver1, Approver2, Approver3, Approver4 are the field columns of that List.
Step 1
In HTML file.
Include jquery-1.8.3.js,
ui/1.10.0/jquery-ui.js,
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js ,
moment.js ,
sppeoplepicker.min.js ,
sppeoplepicker.js
And also, store the above JS file as .js format and include in HTML.
Step 2
In Document.ready function, intialise all the people pickers. For example -
$("#peoplePickerDiv1").spPeoplePicker();
Step 3
Based on the option values, I am hiding and showing textbox
  1. if(document.getElementById("txtlev").value==0)
  2. $('tr[id="approver1"]').hide();
  3. $('tr[id="approver1"]').show();
Create necessary Div tag and buttons to append people picker as shown in the above HTML file.
Step 4

In JS part
For Loop for all Divs
  1. $("div[class*='sp-peoplepicker-topLevel']").each(function()
It checks whether the Div box is empty or not..
  1. if($(this).find("span[class='ms-entity-resolved']").text().length>0
Step 5
Based on the div value, the below code retrieves the Id of Users(people picker) Eg : SpTestuser1, the id is 10
  1. var endPointURLToGetUseID =_spPageContextInfo.webAbsoluteUrl+"/_api/web/siteusers?$select=Title,ID&$filter=Title eq '"+$(this).find("span[class='ms-entity-resolved']").text()+"'";
Step 6
  1. function callSuccessMethod(data, request) {
  2. $.each(data.d.results, function(key, val) {
  3. var GetId = val.Id;
  4. user.push([GetId]);
  5. });
Based on results of Val.id, we push the values of GetId into some variable user array I created (Push Function acts by using moment.js)
Step 7
Update the values in the List using below code.
  1. ListItem.set_item('Employeename', Ename);
  2. ListItem.set_item('Empid', EmpID);
  3. if (user.length == 4) {
  4. ListItem.set_item('Approver1', user[1][0]);
  5. ListItem.set_item('Approver2', user[1][0]);
  6. ListItem.set_item('Approver3', user[2][0]);
  7. ListItem.set_item('Approver4', user[3][0]);
  8. ListItem.update();
  9. }
Step 8
The below code is used for validation...
  1. if (document.getElementById("txtlev").value == 2 && document.getElementById("peoplePickerDiv2_TopSpan_HiddenInput").value == "" || document.getElementById("peoplePickerDiv2_TopSpan_HiddenInput").value == "[]") {
  2. alert("Please Specify Approver2");
  3. returnval = false;
  4. }