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

In the following SSCCE, I have three tabs titled Starks, Lannisters and Targaryens. Then I have a form containing a few checkboxes and a button labelled Save. When this form is submitted, I want the following information to be submitted:

The title of the selected/active tab
The label of the selected/checked checkboxes

For 2, I have added <input type="checkbox" name="columnHeadersToDisplay" value="STRING-LABEL-OF-THIS-CHECKBOX" /> elements into the form.

For 1, I have written a click handler for the Save button in JS, in which I have appended a hidden input field inside the form and given it a value of the string-title-of-the-tab which is active.

The problem is that when I check a couple of checkboxes, and also activate/open the Lannisters tab and press the Save button (so the form is submitted) and I print out the contents of $_POST, I get:

Array ( [activeTabTitle] => Starks )

What I needed and what I was expecting (when I checked the first two checkboxes) was

Array ( [activeTabTitle] => Lannisters, [columnHeadersToDisplay] => Array ( [0] => Apes, [1] => Himalayas, [2] => Malaysia ) )

The question is that why am I not getting the title of the active tab, and why is any information about the checked checkboxes not being posted/submitted?

What am I doing incorrectly?

<?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();

    });

});

The problem is that checked state is not stored in the html, it is a property of the dom elements.

The checked attribute is not updated by user interaction and is only used by browser to set the checked property during initial rendering

This is the same for other attributes like value or selected

Use append() or prepend() to add only the hidden input instead of replacing the whole inner html of the form

Change

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

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

This will leave all the other form elements as they were and not affect the checked property (or values for other types of controls)

for accessing the checked checkbox values, use an array for the 'name' attribute. like this:

<input type="checkbox" name="columnHeadersToDisplay[]" value="STRING-LABEL-OF-THIS-CHECKBOX" />

</div>