使用 javascript 从 HTML 表单中的复选框向 SP List Choice 列添加多个值

Question

好的，所以我有这个工作，但不得不出城一周，回来后不小心覆盖了我的原始代码，无法再次解决这个问题。

我有一个带有复选框的 HTML 表单，我希望能够 select 多个复选框并将这些复选框的值插入到我的 SP 列表的选择列中。在下面的代码中，问题从 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>

Answer 1

以下link提供了答案：https://sharepoint.stackexchange.com/questions/256769/add-multiple-values-to-sp-list-choice-column-from-checkboxes-in-html-form-using/256795#256795

注意： 我得到了两个选项的答案：1) javascript，和 2) jQuery。选项 2 对我有用，但选项 1 还没有工作。

使用 javascript 从 HTML 表单中的复选框向 SP List Choice 列添加多个值

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

sharepoint-list