0

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:

  1. The title of the selected/active tab
  2. 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();

    });

});
Solace
  • 8,612
  • 22
  • 95
  • 183

2 Answers2

1

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

to

$("#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)

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • 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... – Solace Jan 01 '17 at 20:41
  • -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 – Solace Jan 01 '17 at 20:42
  • 1
    selector is wrong.....you are looking for **either** `.mdl-tabs__tab` **or** `.is-active` and `html()` will only return first eleemnt in that collection – charlietfl Jan 01 '17 at 20:45
  • 1
    remove the comma in the selector – charlietfl Jan 01 '17 at 20:47
  • 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. – Solace Jan 01 '17 at 21:03
  • 1
    oops my bad about the space also – charlietfl Jan 01 '17 at 21:07
-1

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" />
Sidra
  • 111
  • 2
  • 9