Post
Ask Question
Eric Sheldon

Eric Sheldon

  • NA
  • 5
  • 792

Add multiple values to SP List Choice column from Checkboxes

Jan 29 2019 11:23 AM
I have an HTML form with checkboxes and I want to be able to select multiple checkboxes and have the values for those checkboxes inserted into the choice column of my SP list. Within my code, the problem starts at value5.

As the code currently is, if I select the checkbox for Ch 1, that value will get entered into the Chapter column of my SP list; however, I cannot figure out how to do it for multiple checked boxes.

  1. <!DOCTYPE html>  
  2. <html lang="en-US" dir="ltr">  
  3. <head>  
  4.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  5.   <link rel="stylesheet" href="/testsite/SiteAssets/bootstrap.min.css">  
  6.   <script src="/testsite/SiteAssets/jquery.min.js"></script>  
  7.   <script src="/testsite/SiteAssets/bootstrap.min.js"></script>  
  8. <style>  
  9.   
  10. .MyButton {  
  11.   font-family: Arial, Helvetica, sans-serif;  
  12.   font-size: 11pt;  
  13.   font-weight:bold;  
  14.   background: #1c4168;  
  15.   color: #eccb13;  
  16.   cursor:pointer;  
  17.   border-radius: 6px!important;    
  18.   margin: 0px 10px 0px 10px;  
  19. }  
  20.   
  21. .MyButton:hover {  
  22.   background: #e2e2e2;  
  23.   color: #800000;  
  24. }  
  25.   
  26. .MyButton2 {  
  27.   font-family: Arial, Helvetica, sans-serif;  
  28.   font-size: 18px;  
  29.   font-weight:bold;  
  30.   background-color: #1c4168;  
  31.   border: none;  
  32.   color: #eecb13;  
  33.   padding: 15px 32px;  
  34.   text-align: center;  
  35.   text-decoration: none;  
  36.   display: inline-block;  
  37.   font-size: 16px;  
  38.   margin: 4px 2px;  
  39.   cursor: pointer;  
  40.   position: absolute;  
  41.   right: 20px;  
  42. }  
  43.   
  44. .MyButton2:hover {  
  45.   background-color: #e2e2e2;  
  46.   color: #800000;  
  47.   border:1px solid;  
  48.   color: #800000;  
  49. }  
  50.   
  51. #buttonHolder {  
  52.   text-align: center;   
  53. }  
  54.   
  55. .csstd1 {  
  56.   padding: 5px 5px 5px 5px;  
  57.   font-size: 11pt;   
  58.   font-weight:bold;  
  59.   width: 20%;  
  60. }  
  61.   
  62. .csstd2 {  
  63.   padding: 5px 5px 5px 5px;  
  64.   font-size: 11pt;   
  65. }  
  66.   
  67. table.center {  
  68.   margin-left:auto;   
  69.   margin-right:auto;  
  70. }  
  71.   
  72. .container *,  
  73. .container *:before,  
  74. .container *:after {  
  75.   -webkit-box-sizing: content-box !important;  
  76.   -moz-box-sizing: content-box !important;  
  77.   box-sizing: border-box !important;  
  78. }  
  79.   
  80. #MyContent {  
  81.   position: relative;  
  82.   top: 100px;  
  83. }  
  84.   
  85. </style>  
  86.   
  87. </head>  
  88. <body>  
  89.   
  90. <div class="container" style="width:15%">  
  91.   <!-- Trigger the modal with a button -->  
  92.   <button type=button class="MyButton2 btn-lg" data-toggle="modal" data-target="#myModal">Request Form</button>  
  93.     
  94.   <!-- Modal -->  
  95.   <div class="modal fade" id="myModal" role="dialog">  
  96.     <div class="modal-dialog">  
  97.   
  98.     <!-- Modal content-->  
  99.       <div id="MyContent" class="modal-content">  
  100.         <div class="modal-header">  
  101.           <h4 class="modal-title">Request Form</h4>  
  102.         </div>  
  103.         <div class="modal-body">  
  104.   
  105.             <div id="insert">    
  106.               <table class="center">    
  107.                 <tr>    
  108.                   <td class="csstd1"> Name: </td>    
  109.                   <td class="csstd2"><input type="text" id="txtname" placeholder="Last, First" style="width:275px"> </td>    
  110.                 </tr>    
  111.                 <tr>    
  112.                   <td class="csstd1"> Rank: </td>    
  113.                   <td class="csstd2"><input type="text" id="txtrank" placeholder="Abbreviated" style="width:85px"> </td>    
  114.                 </tr>    
  115.                 <tr>    
  116.                   <td class="csstd1"> Email: </td>    
  117.                   <td class="csstd2"><input type="text" id="txtemail" placeholder=".mil address" style="width:275px"> </td>    
  118.                 </tr>    
  119.                 <tr>    
  120.                   <td class="csstd1"> DSN: </td>    
  121.                   <td class="csstd2"><input type="text" id="txtdsn" placeholder="xxx-xxxx" style="width:80px"></td>    
  122.                 </tr>  
  123.                 <tr>    
  124.                   <td class="csstd1"> Chapter: </td>    
  125.                   <td class="csstd2">  
  126.                    <div class="checkbox">  
  127.                     <label><input type="checkbox" id="box1" value="1"> Ch 1</div>  
  128.                    <div class="checkbox">  
  129.                     <label><input type="checkbox" id="box2" value="2"> Ch 2</div>  
  130.                    <div class="checkbox">  
  131.                     <label><input type="checkbox" id="box3" value="3"> Ch 3</div>  
  132.                    <div class="checkbox">  
  133.                     <label><input type="checkbox" id="box4" value="4"> Ch 4</div>  
  134.                    <div class="checkbox">  
  135.                     <label><input type="checkbox" id="box5" value="5"> Ch 5</div>  
  136.                    <div class="checkbox">  
  137.                     <label><input type="checkbox" id="box6" value="6"> Ch 6</div>  
  138.                    <div class="checkbox">  
  139.                     <label><input type="checkbox" id="box7" value="7"> Ch 7</div>  
  140.                    <div class="checkbox">  
  141.                     <label><input type="checkbox" id="box8" value="8"> Ch 8</div>  
  142.                    <div class="checkbox">  
  143.                     <label><input type="checkbox" id="box9" value="9"> Ch 9</div>  
  144.                    <div class="checkbox">  
  145.                     <label><input type="checkbox" id="box10" value="10"> Ch 10</div>  
  146.                    <div class="checkbox">  
  147.                     <label><input type="checkbox" id="box11" value="11"> Ch 11</div>  
  148.                    <div class="checkbox">  
  149.                     <label><input type="checkbox" id="box12" value="12"> Ch 12</div>  
  150.                    <div class="checkbox">  
  151.                     <label><input type="checkbox" id="box13" value="13"> Ch 13</div>  
  152.   
  153.                    </td>  
  154.                 </tr>  
  155.               </table>    
  156.   
  157.            <div class="modal-footer" id="buttonHolder">  
  158.              <button class="MyButton" type="button" id="buttoninsert" onclick="insert()">Submit</button>    
  159.              <button class="MyButton" type="button" onclick="ClearFields()">Clear Form</button>  
  160.              <button class="MyButton" type="button" data-dismiss="modal">Close</button>  
  161.            </div>  
  162.          </div>  
  163.         
  164.      </div>  
  165.    </div>  
  166.   
  167. <script>  
  168.   
  169. var siteurl = '/testsite';    
  170.   
  171. function insert()    
  172. {    
  173.     var clientContext = new SP.ClientContext(siteurl); // Get SPSITEURL    
  174.     var list = clientContext.get_web()    
  175.         .get_lists()    
  176.         .getByTitle('Test'); // Get SP list     
  177.     var itemCreateInfo = new SP.ListItemCreationInformation();    
  178.       
  179.     //Get value from input element  
  180.     var value1 = document.getElementById('txtname').value;    
  181.         
  182.     var value2 = document.getElementById('txtrank').value;    
  183.        
  184.     var value3 = document.getElementById('txtemail').value;    
  185.         
  186.     var value4 = document.getElementById('txtdsn').value;    
  187.       
  188.     var value5 = document.getElementById('box1').value;  
  189.       
  190.     this.oListItem = list.addItem(itemCreateInfo);    
  191.   
  192.     //Adding list items    
  193.     oListItem.set_item('Name', value1);    
  194.     oListItem.set_item('Rank', value2);    
  195.     oListItem.set_item('Email', value3);    
  196.     oListItem.set_item('DSN', value4);  
  197.     oListItem.set_item('Chapter', value5);  
  198.     oListItem.update();    
  199.     clientContext.load(oListItem);    
  200.     clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));    
  201. }    
  202.   
  203. function onQuerySucceeded()    
  204. {    
  205.     alert('Item created Successfully');    
  206. }    
  207.   
  208. function onQueryFailed(sender, args)    
  209. {    
  210.     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());    
  211. }    
  212.   
  213. function ClearFields() {  
  214.   document.getElementById('txtname').value='';  
  215.   document.getElementById('txtrank').value='';  
  216.   document.getElementById('txtemail').value='';  
  217.   document.getElementById('txtdsn').value='';  
  218.   document.getElementById("box1").checked = false;  
  219.   document.getElementById("box2").checked = false;  
  220.   document.getElementById("box3").checked = false;  
  221.   document.getElementById("box4").checked = false;  
  222.   document.getElementById("box5").checked = false;  
  223.   document.getElementById("box6").checked = false;  
  224.   document.getElementById("box7").checked = false;  
  225.   document.getElementById("box8").checked = false;  
  226.   document.getElementById("box9").checked = false;  
  227.   document.getElementById("box10").checked = false;  
  228.   document.getElementById("box11").checked = false;  
  229.   document.getElementById("box12").checked = false;  
  230.   document.getElementById("box13").checked = false;  
  231. }  
  232.   
  233. </script>  
  234.   
  235. </body>  
  236. </html>  


Answers (1)