unable to get element values by ID in bootstrap table thead

Question

Using bootstrap table; the code below returns an empty getElementById for topic_name value, but if I move the 'input' outside of the thead it works. What is happening and how do I get this to work within thead?

<table id="table" class="table table-striped">
<thead>
  <tr>
    <th data-field="topic">
      <input type="text" name="topic_name" id="topic_name">
      <a onclick="topicButton()" href="##">this</a>
    </th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>some info here...</td>
  </tr>
</tbody>
</table>
<script>
function topicButton()
{ 
  var getThis=document.getElementById("topic_name").value;
  alert(getThis);
}
</script>

Answer 1

Tested 2 examples and removed some bootstrap table parameters, removing one parameter worked in 1 example and removing another worked in the other.

For the code I submitted above (after I added all the additional bootstrap table parameters that my original code included - see list below), I removed data-toggle="table" and it worked. In my original code i remove data-show-columns="true" and it worked... odd.

Here is a list of the parameters I had attached to bootstrap table:

  <table id="table" class="table table-striped table-borderless"
  data-toolbar="#toolbar"
  data-toggle="table" 
  data-cookie="true"
  data-cookie-id-table="topic_id"   
  data-pagination="true"
  data-search="true"
  data-sort-name="topic_id"
  data-sort-order="desc"
  data-unique-id="topic_id"
  data-show-columns="true"
  data-show-columns-toggle-all="true"   
  data-show-search-button="true"
  data-page-size="5"
  data-page-list="[5, 10, 25, 50, 100, all]"
  data-select-item-name="selectItemName"
  data-show-export="true">