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