Javascript 使用POST提交表单，未发布/提交有关复选框的信息_Javascript_Php_Jquery_Html_Forms

Javascript 使用POST提交表单，未发布/提交有关复选框的信息

javascript php jquery html forms

Javascript 使用POST提交表单，未发布/提交有关复选框的信息,javascript,php,jquery,html,forms,Javascript,Php,Jquery,Html,Forms,在下面的SSCCE中，我有三个标签，分别是Starks、Lannister和Targryen。然后我有一个表单，其中包含几个复选框和一个标签为Save的按钮。提交此表格时，我希望提交以下信息：所选/活动选项卡的标题选中/选中复选框的标签对于2，我在表单中添加了元素对于1，我已经为JS中的Save按钮编写了一个click处理程序，在其中我在表单中添加了一个隐藏的输入字段，并给它一个活动选项卡的字符串标题值问题是，当我选中几个复选框，同时激活/打开Lannisters选项卡并按下Save按

在下面的SSCCE中，我有三个标签，分别是Starks、Lannister和Targryen。然后我有一个表单，其中包含几个复选框和一个标签为Save的按钮。提交此表格时，我希望提交以下信息：

所选/活动选项卡的标题选中/选中复选框的标签对于2，我在表单中添加了元素

对于1，我已经为JS中的Save按钮编写了一个click处理程序，在其中我在表单中添加了一个隐藏的输入字段，并给它一个活动选项卡的字符串标题值

问题是，当我选中几个复选框，同时激活/打开Lannisters选项卡并按下Save按钮，以便提交表单并打印$\u POST的内容时，我得到：

数组[activeTabTitle]=>Starks

当我选中前两个复选框时，我需要的和期望的是

数组[activeTabTitle]=>Lannisters，[columnHeadersToDisplay]=>Array[0]=>Apes，[1]=>Himalayas，[2]=>Malaysia

问题是，为什么我没有获得活动选项卡的标题，为什么没有发布/提交有关复选框的任何信息

我做错了什么

<?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：

问题是选中状态不存储在html中，它是dom元素的属性

选中的属性不会由用户交互更新，仅由浏览器在初始渲染期间用于设置选中的属性

这与“值”或“选定”等其他属性相同

使用append或prepend仅添加隐藏的输入，而不是替换表单的整个内部html

改变

$("#chooseColumnsForm").html('<input.....>'  + $("#chooseColumnsForm").html())

到

这将使所有其他表单元素保持原样，并且不会影响其他类型控件的选中属性或值

要访问选中的复选框值，请为“name”属性使用数组。像这样：

非常感谢你。这解决了复选框的问题，但选项卡的问题仍然存在。首次加载页面时选择的选项卡为Starks。在HTML级别，Starks选项卡默认为活动类。但是，我选择了Lannisters选项卡，将is active类添加到Lannisters选项卡，并从Starks选项卡中删除。然后我点击保存按钮待续…-从前面的评论继续：但是这个变化并没有反映在JS中。在JS中，在保存按钮的click listener中，我检查哪个选项卡具有活动类，并将该选项卡的标题指定给隐藏输入字段的value属性。但它总是Starks，即使我在点击Save按钮之前选择了Lannister或Targaryens。这就是制表符的问题：选择符错误…..您正在查找的.mdl-tabs\uu tab或.处于活动状态，html将仅返回该集合中的第一个元素删除选择符中的逗号操作我的空间错误

$("#chooseColumnsForm").html('<input.....>'  + $("#chooseColumnsForm").html())

$("#chooseColumnsForm").append('<input.....>')