Add multiple values to SP List Choice column from Checkboxes

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.

>
<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%">
<button type=button class="MyButton2 btn-lg" data-toggle="modal" data-target="#myModal">Request Formbutton>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div id="MyContent" class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Request Formh4>
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 1div>
<div class="checkbox">
<label><input type="checkbox" id="box2" value="2"> Ch 2div>
<div class="checkbox">
<label><input type="checkbox" id="box3" value="3"> Ch 3div>
<div class="checkbox">
<label><input type="checkbox" id="box4" value="4"> Ch 4div>
<div class="checkbox">
<label><input type="checkbox" id="box5" value="5"> Ch 5div>
<div class="checkbox">
<label><input type="checkbox" id="box6" value="6"> Ch 6div>
<div class="checkbox">
<label><input type="checkbox" id="box7" value="7"> Ch 7div>
<div class="checkbox">
<label><input type="checkbox" id="box8" value="8"> Ch 8div>
<div class="checkbox">
<label><input type="checkbox" id="box9" value="9"> Ch 9div>
<div class="checkbox">
<label><input type="checkbox" id="box10" value="10"> Ch 10div>
<div class="checkbox">
<label><input type="checkbox" id="box11" value="11"> Ch 11div>
<div class="checkbox">
<label><input type="checkbox" id="box12" value="12"> Ch 12div>
<div class="checkbox">
<label><input type="checkbox" id="box13" value="13"> Ch 13div>
td>
tr>
table>
<div class="modal-footer" id="buttonHolder">
<button class="MyButton" type="button" id="buttoninsert" onclick="insert()">Submitbutton>
<button class="MyButton" type="button" onclick="ClearFields()">Clear Formbutton>
<button class="MyButton" type="button" data-dismiss="modal">Closebutton>
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>

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Eric Sheldon7y ago
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.