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

Question

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.

<!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>

So to clarify, Chapter is a choice column in your SharePoint list? Is Chapter set up to be a multi-select choice column? What are the possible choice values for the Chapter column? Is it 1, 2, 3, 4... etc, or is it Ch 1, Ch 2, Ch 3... etc? Or some other values? — Dylan Cristy
– Dylan Cristy, Commented Jan 29, 2019 at 15:41
Thank you for responding! Yes chapter is a choice column with checkboxes selected to allow for multiple selections. The choices are per the value= of each checkbox i.e. 1, 2, 3, 4...etc. Thanks again! — EricS
– EricS, Commented Jan 29, 2019 at 17:04

Dylan Cristy · Accepted Answer · 2019-01-29 18:30:23Z

Ok, I see a couple things going on here. First, you're not closing your label tags, and while it might actually work in practice, it's a bit sloppy, and might cause some unexpected behavior down the road, so I would make sure all your checkbox divs are set up like:

<div class="checkbox">
    <label><input type="checkbox" id="box1" value="1"> Ch 1</label>
</div>

Second, the line that you say is causing you problems is this:

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

What that line of code is doing is getting only the first checkbox, and getting the value of the value attribute, which is 1. It will get that value no matter if the checkbox is checked or not, because you are not checking anywhere to see if the checkbox is actually checked.

What I'm inferring from your question is that you want to see which checkboxes are checked, out of all the checkboxes, and if they are checked, then you want the value of their value attribute. Doing it the way you are doing it now, using vanilla JS, you could do something like:

// we'll store the selected values in an array,
// which we can combine later
var selectedValues = [];

var checkboxes = document.querySelectorAll('td.csstd2 input[type="checkbox"]');
checkboxes.forEach(function (checkbox) {
    if (checkbox.checked) {
        selectedValues.push(checkbox.value);
      }
});

var value5 = selectedValues.join(',');

// now value5 will be a string of comma separated values, like "2,4,5,6,9"
// which you can use to set the field value

But, it looks like you are also loading jQuery, so you could do it the jQuery way:

var selectedValues = [];

$('td.csstd2 input[type="checkbox"]').each(function () {
    if ($(this).is(':checked')) {
        selectedValues.push($(this).attr('value'));
    }
});

var value5 = selectedValues.join(',');

What each of those is doing is essentially getting all inputs of type checkbox that are inside the td with class "csstd2" (because those are the only ones we care about, we don't want to get any other checkboxes anywhere else on the page), looping through all those checkboxes, and if any of them are checked, then we add that inputs value to our list of selected values. Then at the end we join that array to make a string that's a comma separated list of all the selected values.

Then you should be able to set the column's value the same way you are doing it:

oListItem.set_item('Chapter', value5);

Excellent, thank you! I will let you know how it works for me. I appreciate the feedback! — EricS
– EricS, Commented Jan 29, 2019 at 18:59
Okay, worked like a charm with the jQuery version, but did nothing with the javascript(??). Would be interested in the javascript version if able. Thank you again!! — EricS
– EricS, Commented Jan 29, 2019 at 20:09
Hmm, not sure why that wouldn't have worked, I tested it in a jsFiddle. Are you sure you didn't typo anything? — Dylan Cristy
– Dylan Cristy, Commented Jan 29, 2019 at 20:45
No sir, no typos, straight copy and paste:) Maybe I placed it in the wrong place?? If you look at my code above, I replaced var value5 = document.getElementById('box1').value; with your javascript. Should it have been placed somewhere else, or in a different order with respect to the rest of the code? — EricS
– EricS, Commented Jan 30, 2019 at 0:24
No, that's the right place.... odd that the plain javascript didn't work, not sure why that would happen. — Dylan Cristy
– Dylan Cristy, Commented Jan 30, 2019 at 13:55

Stack Exchange Network

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

1 Answer 1

Your Answer

Hot Network Questions

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

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions