好的,所以我做了这个工作,但是不得不出城一个星期,回来后不小心覆盖了我原来的代码,无法再次解决这个问题。
我有一个带复选框的HTML表单,我希望能够选择多个复选框,并将这些复选框的值插入到我的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>
答案 0 :(得分:0)
注意::为我提供了两个选项的答案:1)javascript和2)jQuery。 选项2对我有用,但选项1尚未起作用。