1. <html>
  2. <style type="text/css">
  3. span.note {
  4. font-size: 140%;
  5. color: red;
  6. }
  8. .textboxclass {
  9. width: 300px;
  10. }
  11. }
  12. div#AddListData {
  13. margin-left: 200px;
  14. border: 0px outset;
  15. width: 600px;
  16. margin-top: -40px;
  17. background-color: #f3e7e7;
  18. }
  19. td {
  20. font-size: 15px;
  21. }
  22. table#AddLeaveTable {
  23. padding-left: 10px;
  24. margin-left: 75px;
  25. margin-top: 5px;
  26. margin-bottom: 5px;
  27. border-collapse: separate;
  28. border-spacing: 15px;
  29. }
  30. </style>
  31. <script type="text/javscript"> $(function () { var ddlSample=""; var DlJob=""; var Ownurl = "URURL/_api/web/Lists/getByTitle('products')/items?select=Title,ID"; $.ajax({ url: Ownurl, headers: { Accept: "application/json;odata=verbose" }, async:false, success: function (data) { var items = data.d.results; if (data.d.results.length > 0) { for (var i = 0; i
  32. < data.d.results.length; i++) { if (data.d.results[i].Title!=n ull) { var StrJob=data.d.results[i][ "Title"]; DlJob+='<option value=' +data.d.results[i].ID+ '>'+StrJob+ '</option>';}} ddlSample='<select id="txtlev"> <option value=0>Select</option> ' +DlJob+ ' </select>'; $( "#txtlev").html(ddlSample); } function jsFunction(value) { var val=value; var ddlSamples="" ; var DlJobs="" ; var Ownurl="URURl/_api/web/Lists/getByTitle('SubProducts')/items$select=Title,ID,Product/ID,Product/Title&$expand=Product/ID&$filter=Product/ID%20eq%20" +val+ ""; $.ajax({ url: Ownurl, headers: { Accept: "application/json;odata=verbose" }, async:false, success: function (data) { var items=d ata.d.results; if (data.d.results.length> 0) { for (var i = 0; i
  33. < data.d.results.length; i++) { if (data.d.results[i].Title!=n ull) { var StrJobs=data.d.results[i][ "Title"]; DlJobs+='<option value=' +StrJobs+ '>' +StrJobs+ '</option>';console.log(DlJobs);}} ddlSamples='<select id="category"><option value="0">Select</option>' +DlJobs+ '</select>'; $( "#category").html(ddlSamples); } },eror: function (data) { alert( "An error occurred. Please try again."); } }); } function CreateListItem() { var clientContext=n ew SP.ClientContext( 'URURL'); var List=c lientContext.get_web().get_lists().getByTitle( 'MasterList'); var itemCreateInfo=n ew SP.ListItemCreationInformation(); this.ListItem=L ist.addItem(itemCreateInfo); var title=document.getElementById( "adtitle").value; var category=document.getElementById( "txtlev").value; var subcategory=document.getElementById( "category").value; ListItem.set_item( 'Title',title); ListItem.set_item( 'category',category); ListItem.set_item( 'subcategory',subcategory); ListItem.update(); clientContext.load(ListItem); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } function onQuerySucceeded() { alert( 'Success'); } function onQueryFailed(sender, args){ alert( 'Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); } </script>
  35. <body>
  36. <div id="AddListData">
  37. <table id='AddLeaveTable'>
  38. <div>
  39. <tr>
  40. <td> Ad Title</td>
  41. <td><input type="text" id="adtitle" /> </td>
  42. </tr>
  43. </div>
  44. <tr>
  45. <td>Category</td>
  46. <td> <select id="txtlev" style="width: 99%; height: 90%" onmousedown="this.value='';" onchange="jsFunction
  47. (this.value);">
  48. <option value=0>Select</option>
  49. </td>
  50. </tr>
  51. <tr> <td>subcategory</td><td><select name="category" id="category"><option value=0>Select</option></select> </td>
  52. </tr>
  53. <tr>
  54. <td></td>
  55. <td> <input type='button' id='btnSubmit' onclick="CreateListItem()" value='Submit' /></td>
  56. </tr>
  57. </table>
  58. </div>
  59. </body>
  61. </html>