Title: Submitting form with POST, information about CHECKED checkboxes is Not being posted/submitted
Tags: javascript;php;jquery;html;forms
Question: 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" /&gt; 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] =&gt; Starks )
What I needed and what I was expecting (when I checked the first two checkboxes) was
Array ( [activeTabTitle] =&gt; Lannisters, [columnHeadersToDisplay] =&gt; Array ( [0] =&gt; Apes, [1] =&gt; Himalayas, [2] =&gt; 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&gt;
<html&gt;
<head&gt;
<link type="text/css" rel="stylesheet" href="material.min.css" /&gt;
<script type="text/javascript" src="material.min.js"&gt;</script&gt;
<script src="jquery.min.js"&gt;</script&gt;
<script src="scripts.js"&gt;</script&gt;
</head&gt;
<body&gt;
<div class="mdl-layout mdl-js-layout"&gt;
<div class="mdl-tabs mdl-js-tabs"&gt;
<div class="mdl-tabs__tab-bar"&gt;
<a href="#starks-panel" class="mdl-tabs__tab is-active" id="starks-tab"&gt;Starks</a&gt;
<a href="#lannisters-panel" class="mdl-tabs__tab" id="lannisters-tab"&gt;Lannisters</a&gt;
<a href="#targaryens-panel" class="mdl-tabs__tab" id="targaryens-tab"&gt;Targaryens</a&gt;
</div&gt;
<div class="mdl-tabs__panel is-active" id="starks-panel" style="width:1000px; height:100px; background-color:wheat;"&gt;
.
</div&gt;
<div class="mdl-tabs__panel" id="lannisters-panel" style="width:1000px; height:100px; background-color:orange;"&gt;
.
</div&gt;
<div class="mdl-tabs__panel" id="targaryens-panel" style="width:1000px; height:100px; background-color:green;"&gt;
.
</div&gt;
</div&gt;
<form method="post" action="" id="chooseColumnsForm" &gt;
<?php
echo "<button type='button' id='submit-form-button' style='padding:15px;'&gt;Save</button&gt;";
foreach ($columnNames as $index=&gt;$columnName) {
echo "<div&gt;
<input type='checkbox' name='columnHeadersToDisplay[]' value='$columnName' /&gt;
<label&gt;$columnName</label&gt;
</div&gt;";
</form&gt;
</div&gt;
</body&gt;
</html&gt;
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+"' /&gt;" + $("#chooseColumnsForm").html()  );
alert(  $("#chooseColumnsForm").html()  );//check
$("#chooseColumnsForm").submit();
});

Here is the accepted answer: 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.....&gt;'  + $("#chooseColumnsForm").html())
$("#chooseColumnsForm").append('<input.....&gt;')
This will leave all the other form elements as they were and not affect the checked property (or values for other types of controls)
Comment for this answer: Thank you very much. This has solved the problem of checkboxes, but the problem of the tabs remains. The tab selected when the page is first loaded is `Starks`. At the level of HTML, `Starks` tab has `is-active` class by default. But then I select the `Lannisters` tab, the `is-active` class is added to the `Lannisters` tab and is removed from the `Starks` tab. _THEN_ I click the `Save` button. - to be continued...
Comment for this answer: -continued from previous comment: But this change is not reflected in JS. In JS, inside the click listener of `Save` button, I check which tab has `is-active` class and assign the title of that tab to the `value` attribute of the Hidden `input` field. But it is always `Starks`, even when I have selected the `Lannisters` or `Targaryens` before clicking the `Save` button. That is the problem with tabs :s
Comment for this answer: Thank you so very much indeed. Had to remove the comma as well as the space from the selector. [This answer](http://stackoverflow.com/questions/1041344/how-can-i-select-an-element-with-multiple-classes#answer-1041352) also helped.
Comment for this answer: selector is wrong.....you are looking for **either** `.mdl-tabs__tab` **or** `.is-active` and `html()` will only return first eleemnt in that collection
Comment for this answer: remove the comma in the selector
Comment for this answer: oops my bad about the space also

Here is another answer: 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" /&gt;

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:01/01/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><php><jquery><html><forms>', 'Title': 'Submitting form with POST, information about CHECKED checkboxes is Not being posted/submitted', 'ViewCount': 65, 'id': 41416582, 'user_AboutMe': '', 'user_AccountId': 4139856.0, 'user_DisplayName': 'Solace', 'user_Reputation': 8342.0, 'user_Views': 2605.0, 'user_id': 3395512.0}}