Search code examples
sharepoint-list

Add multiple values to SP List Choice column from Checkboxes in HTML form using javascript

Okay, so I had this working but had to go out of town for a week, came back and accidentally overwrote my original code and cannot figure this out again.

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. In the code below, the problem starts at value5. Of course it wouldn't surprise me if there are other problems.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/testsite/SiteAssets/bootstrap.min.css">
  <script src="/testsite/SiteAssets/jquery.min.js"></script>
  <script src="/testsite/SiteAssets/bootstrap.min.js"></script>
<style>

.MyButton {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  font-weight:bold;
  background: #1c4168;
  color: #eccb13;
  cursor:pointer;
  border-radius: 6px!important;  
  margin: 0px 10px 0px 10px;
}

.MyButton:hover {
  background: #e2e2e2;
  color: #800000;
}

.MyButton2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight:bold;
  background-color: #1c4168;
  border: none;
  color: #eecb13;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  position: absolute;
  right: 20px;
}

.MyButton2:hover {
  background-color: #e2e2e2;
  color: #800000;
  border:1px solid;
  color: #800000;
}

#buttonHolder {
  text-align: center; 
}

.csstd1 {
  padding: 5px 5px 5px 5px;
  font-size: 11pt; 
  font-weight:bold;
  width: 20%;
}

.csstd2 {
  padding: 5px 5px 5px 5px;
  font-size: 11pt; 
}

table.center {
  margin-left:auto; 
  margin-right:auto;
}

.container *,
.container *:before,
.container *:after {
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: border-box !important;
}

#MyContent {
  position: relative;
  top: 100px;
}

</style>

</head>
<body>

<div class="container" style="width:15%">
  <!-- Trigger the modal with a button -->
  <button type=button class="MyButton2 btn-lg" data-toggle="modal" data-target="#myModal">Request Form</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
      <div id="MyContent" class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Request Form</h4>
        </div>
        <div class="modal-body">

            <div id="insert">  
              <table class="center">  
                <tr>  
                  <td class="csstd1"> Name: </td>  
                  <td class="csstd2"><input type="text" id="txtname" placeholder="Last, First" style="width:275px"> </td>  
                </tr>  
                <tr>  
                  <td class="csstd1"> Rank: </td>  
                  <td class="csstd2"><input type="text" id="txtrank" placeholder="Abbreviated" style="width:85px"> </td>  
                </tr>  
                <tr>  
                  <td class="csstd1"> Email: </td>  
                  <td class="csstd2"><input type="text" id="txtemail" placeholder=".mil address" style="width:275px"> </td>  
                </tr>  
                <tr>  
                  <td class="csstd1"> DSN: </td>  
                  <td class="csstd2"><input type="text" id="txtdsn" placeholder="xxx-xxxx" style="width:80px"></td>  
                </tr>
                <tr>  
                  <td class="csstd1"> Chapter: </td>  
                  <td class="csstd2">
                   <div class="checkbox">
                    <label><input type="checkbox" id="box1" value="1"> Ch 1</div>
                   <div class="checkbox">
                    <label><input type="checkbox" id="box2" value="2"> Ch 2</div>
                   <div class="checkbox">
                    <label><input type="checkbox" id="box3" value="3"> Ch 3</div>
                   <div class="checkbox">
                    <label><input type="checkbox" id="box4" value="4"> Ch 4</div>
                   <div class="checkbox">
                    <label><input type="checkbox" id="box5" value="5"> Ch 5</div>
                   <div class="checkbox">
                    <label><input type="checkbox" id="box6" value="6"> Ch 6</div>
                   <div class="checkbox">
                    <label><input type="checkbox" id="box7" value="7"> Ch 7</div>
                   <div class="checkbox">
                    <label><input type="checkbox" id="box8" value="8"> Ch 8</div>
                   <div class="checkbox">
                    <label><input type="checkbox" id="box9" value="9"> Ch 9</div>
                   <div class="checkbox">
                    <label><input type="checkbox" id="box10" value="10"> Ch 10</div>
                   <div class="checkbox">
                    <label><input type="checkbox" id="box11" value="11"> Ch 11</div>
                   <div class="checkbox">
                    <label><input type="checkbox" id="box12" value="12"> Ch 12</div>
                   <div class="checkbox">
                    <label><input type="checkbox" id="box13" value="13"> Ch 13</div>

                   </td>
                </tr>
              </table>  

           <div class="modal-footer" id="buttonHolder">
             <button class="MyButton" type="button" id="buttoninsert" onclick="insert()">Submit</button>  
             <button class="MyButton" type="button" onclick="ClearFields()">Clear Form</button>
             <button class="MyButton" type="button" data-dismiss="modal">Close</button>
           </div>
         </div>

     </div>
   </div>

<script>

var siteurl = '/testsite';  

function insert()  
{  
    var clientContext = new SP.ClientContext(siteurl); // Get SPSITEURL  
    var list = clientContext.get_web()  
        .get_lists()  
        .getByTitle('Test'); // Get SP list   
    var itemCreateInfo = new SP.ListItemCreationInformation();  

    //Get value from input element
    var value1 = document.getElementById('txtname').value;  

    var value2 = document.getElementById('txtrank').value;  

    var value3 = document.getElementById('txtemail').value;  

    var value4 = document.getElementById('txtdsn').value;  

    var value5 = document.getElementById('box1').value;

    this.oListItem = list.addItem(itemCreateInfo);  

    //Adding list items  
    oListItem.set_item('Name', value1);  
    oListItem.set_item('Rank', value2);  
    oListItem.set_item('Email', value3);  
    oListItem.set_item('DSN', value4);
    oListItem.set_item('Chapter', value5);
    oListItem.update();  
    clientContext.load(oListItem);  
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));  
}  

function onQuerySucceeded()  
{  
    alert('Item created Successfully');  
}  

function onQueryFailed(sender, args)  
{  
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
}  

function ClearFields() {
  document.getElementById('txtname').value='';
  document.getElementById('txtrank').value='';
  document.getElementById('txtemail').value='';
  document.getElementById('txtdsn').value='';
  document.getElementById("box1").checked = false;
  document.getElementById("box2").checked = false;
  document.getElementById("box3").checked = false;
  document.getElementById("box4").checked = false;
  document.getElementById("box5").checked = false;
  document.getElementById("box6").checked = false;
  document.getElementById("box7").checked = false;
  document.getElementById("box8").checked = false;
  document.getElementById("box9").checked = false;
  document.getElementById("box10").checked = false;
  document.getElementById("box11").checked = false;
  document.getElementById("box12").checked = false;
  document.getElementById("box13").checked = false;
}

</script>

</body>
</html>
Solution

  • An answer was provided at the following link: https://sharepoint.stackexchange.com/questions/256769/add-multiple-values-to-sp-list-choice-column-from-checkboxes-in-html-form-using/256795#256795

    NOTE: I was provided an answer with two options: 1) javascript, and 2) jQuery. Option 2 worked for me but option 1 has yet to work.