提交带有POST的表单，有关复选框的信息不被张贴/提交。
在下面的SSCCE中，我有三个名为Starks、Lannisters和Targaryens的选项卡。然后，我有一个表单，其中包含一些复选框和一个标签为Save的按钮。在递交此表格时，我希望提交下列资料：
- 选定/活动选项卡的标题
- 选中/选中复选框的标签
对于2，我在表单中添加了<input type="checkbox" name="columnHeadersToDisplay" value="STRING-LABEL-OF-THIS-CHECKBOX" />元素。
对于1，我为JS中的Save按钮编写了一个单击处理程序，其中我在表单中附加了一个隐藏的 input字段，并给它一个活动的字符串标题-选项卡的值。
问题是，当我选中两个复选框，同时激活/打开Lannisters Save 选项卡，按下Save按钮(因此提交了表单)，然后打印出获得的 $_POST**，的内容：*
Array ( [activeTabTitle] => Starks )
我需要什么，我期待什么(当我检查前两个复选框时)
Array ( [activeTabTitle] => Lannisters, [columnHeadersToDisplay] => Array ( [0] => Apes, [1] => Himalayas, [2] => Malaysia ) )
问题是，为什么我没有得到的标题-- active 选项卡，以及为什么没有张贴/提交有关复选框的任何信息？
我做错什么了？
<?php
$columnNames = array('Apes', 'Himalayas', 'Malaysia', 'Asia', 'Britian', 'Austria', 'Norway', 'Greece', 'Thailand', 'Maldives');
if ( isset($_POST) ) {
print_r($_POST);//check
} else {
echo 'isset($_POST["columnHeadersToDisplay"]) returns false.';
}
?>
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="material.min.css" />
<script type="text/javascript" src="material.min.js"></script>
<script src="jquery.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout">
<div class="mdl-tabs mdl-js-tabs">
<div class="mdl-tabs__tab-bar">
<a href="#starks-panel" class="mdl-tabs__tab is-active" id="starks-tab">Starks</a>
<a href="#lannisters-panel" class="mdl-tabs__tab" id="lannisters-tab">Lannisters</a>
<a href="#targaryens-panel" class="mdl-tabs__tab" id="targaryens-tab">Targaryens</a>
</div>
<div class="mdl-tabs__panel is-active" id="starks-panel" style="width:1000px; height:100px; background-color:wheat;">
.
</div>
<div class="mdl-tabs__panel" id="lannisters-panel" style="width:1000px; height:100px; background-color:orange;">
.
</div>
<div class="mdl-tabs__panel" id="targaryens-panel" style="width:1000px; height:100px; background-color:green;">
.
</div>
</div>
<form method="post" action="" id="chooseColumnsForm" >
<?php
echo "<button type='button' id='submit-form-button' style='padding:15px;'>Save</button>";
foreach ($columnNames as $index=>$columnName) {
echo "<div>
<input type='checkbox' name='columnHeadersToDisplay[]' value='$columnName' />
<label>$columnName</label>
</div>";
}
?>
</form>
</div>
</body>
</html>scripts.js:
$(document).ready(function() {
$("#submit-form-button").click(function(event) {
alert('$("#submit-form-button") clicked');//check
//alert( $("#chooseColumnsForm").html() );//check
var innerHTMLOfActiveTabAnchor = $(".mdl-tabs__tab, .is-active").html();
$("#chooseColumnsForm").html( "<input type='hidden' name='activeTabTitle' value='"+innerHTMLOfActiveTabAnchor+"' />" + $("#chooseColumnsForm").html() );
alert( $("#chooseColumnsForm").html() );//check
$("#chooseColumnsForm").submit();
});
});
回答 2
Stack Overflow用户
发布于 2017-01-01 07:47:14
问题是选中状态没有存储在html中，而是dom元素的属性。
选中的属性不会通过用户交互更新，只用于浏览器在初始呈现过程中设置checked属性。
其他属性(如value或selected )也是如此
使用append()或prepend()只添加隐藏输入，而不是替换表单的整个内部html。
变化
$("#chooseColumnsForm").html('<input.....>' + $("#chooseColumnsForm").html())至
$("#chooseColumnsForm").append('<input.....>')这将保留所有其他窗体元素的原样，而不会影响选中的属性(或其他类型控件的值)。
Stack Overflow用户
发布于 2017-01-01 07:57:33
若要访问选中的复选框值，请为“name”属性使用数组。就像这样：
<input type="checkbox" name="columnHeadersToDisplay[]" value="STRING-LABEL-OF-THIS-CHECKBOX" />
https://stackoverflow.com/questions/41416582
复制
腾讯云开发者
