提交表单时数据表中的复选框不起作用

我的页面设计有一个表单，表单顶部有一个包含在div元素中的文本框。在它下面，我有一个数据表，表的每一行都有一个复选框。整个表单依次包含在它周围的另一个div元素中。在这种情况下，每当我在上面的文本框中提交具有某个值的表单，并通过选中复选框选择其中一行时，复选框值都不会通过表单提交传递。

如果我移除上面文本框周围的div元素，并放置整个表单在一个大的div中，它可以工作。然而，我有一个限制，我不能删除包含文本框的内部div。我无法解释为什么我有这样的约束，因为这只是我的需求的简化和切中要害的版本。

我还包括CGI Perl代码以及下面的可运行代码，在表单操作中，只需要调用当前脚本：

enter code here
use CGI;
use CGI::Carp qw(fatalsToBrowser);
my $qry = new CGI;
&main();
sub main {
    $qry->header();
    my $body = &display_page();
    print $body;
}
sub display_page {
    my $url = "current_script.cgi";

    print '<pre>' . Data::Dumper::Dumper( '%{$qry->Vars}) . '</pre>';
    my $checked1 = "checked" if defined $qry->param('First') || '' ;
    my $checked2 = "checked" if defined $qry->param('Second') || '' ;
    my $checked3 = "checked" if defined $qry->param('Third') || '' ;
    my $html .= qq{<br>
   <div>
  <div>
  <form name='myForm' action='$url' method=post>'n};
  $html .=  $qry->textfield(-name=>'TEXT_FIELD',
    -default=>'Enter your text here',
    -size=>35,
    -maxlength=>50);
  $html .= "<br><br> </div>";

  $html .= qq{
 <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">  </script>
 <link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css'>
 <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src ="/js/testchkbox.js"></script>
};
$html .= qq{
    <table width = "90%" border="1" >
    <tr>
    <td>
    <div class="container" >
    <table id = "test" class="display compact cell-border table-bordered stripe row-border order-column" width="100%">
    <thead>
    <tr bgcolor="skyblue">
        <td>Check</td>
        <td>Name</td>
        <td>DOB</td>
        <td>Address</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"  name = "Second" value = "1st" $checked1></td>
        <td>Mark</td>
        <td>11-22-15</td>
        <td>London-101</td>
    </tr>
    <tr>
        <td><input type="checkbox"  name = "Second" value = "2nd" $checked2 ></td>
        <td>Sam</td>
        <td>11-22-15</td>
        <td>London-101</td>
    </tr>
    <tr>
        <td><input type="checkbox"  name = "Second" value = "3rd" $checked3></td>
        <td>John</td>
        <td>11-22-15</td>
        <td>London-101</td>
    </tr>
    </tbody>
    </table>
    </div>
</td>
    </tr>
    </table>
    };
 $html .=  <<END;
@{[ $qry->submit(-name=>'STORE', -value=>'Submit') ]}
END
$html .= "</form><br></div>";
return $html;
}

https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js
$(document).ready(function(){
    var table = $('#test').DataTable({
        bInfo: true,
        bSort: true,
        bFilter: true,
        scrollX: '100%',
        scrollY: '475px',
        paginate: false,
        scrollCollapse: true,
        dom: '<"toolbar">frtip',
        oLanguage: {
        "sSearch": "Search"
        },
    });
    /* client side csv export button */
    new $.fn.dataTable.Buttons(table, {
        buttons: [{
            extend: 'csvHtml5',
            text: 'Export',
            className: 'export btn btn-sm btn-success'
        }]
    });
    /* add the button to the div with class name toolbar */
    table.buttons().container().find("a").removeClass( 'btn-default' );
    table.buttons().container().appendTo( $('div.toolbar') );
    /* use the below button in case we need to fetch the data from server side */
    /*
    var bootstrapButton = "title='Export data into CSV' class='export btn btn-sm btn-success' role='button'"
    $("div.toolbar").html("<a href='" + window.location.href + "/csv'" + bootstrapButton + ">Export</a>");
    */
});

https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css

<pre>$VAR1 = {};
</pre><br>
    <div>
    <div>
    <form name='myForm' action='current_script.cgi' method=post>
<input type="text" name="TEXT_FIELD" value="Enter your text here" size="35" maxlength="50" /><br><br> </div> 
     
    
    
        <table width = "90%" border="1" >
        <tr>
        <td> 
        <div class="container" >
        <table id = "test" class="display compact cell-border table-bordered stripe row-border order-column" width="100%">
        <thead>
        <tr bgcolor="skyblue"> 
            <td>Check</td>
            <td>Name</td>
            <td>DOB</td>
            <td>Address</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="checkbox"  name = "Second" value = "1st" ></td>
            <td>Mark</td>
            <td>11-22-15</td>
            <td>London-101</td>
        </tr>
        <tr>
            <td><input type="checkbox"  name = "Second" value = "2nd"  ></td>
            <td>Sam</td>
            <td>11-22-15</td>
            <td>London-101</td>
        </tr>
        <tr>
            <td><input type="checkbox"  name = "Second" value = "3rd" ></td>
            <td>John</td>
            <td>11-22-15</td>
            <td>London-101</td>
        </tr>
        </tbody>
        </table>
        </div>
         </td>
        </tr>
        </table>
        <input type="submit" name="STORE" value="Submit" />
</form><br></div>