title: Checkbox in datatable not working while submitting the form
body: <p>The design of my page has a form comprising a textbox at the top contained in a div element. Beneath that I have datatable with a checkbox in each row of the table. This entire form is in turn contained in another div element around it.
  
  In this case, whenever I submit the form with some value in the textbox above and selecting one of the rows by checking the checkbox, the checkbox value is not getting passed through the form submission. </p>
  
  <p>If I remove the div element around the textbox above and put the entire form 
  in a single big div, it works. However, I have constraint here that I can not 
  remove the inner div containing the textbox. I can not explain why I have such constraint since this is just a simplified and to-the-point version of my requirement. </p>
  
  <p>I am also including the CGI Perl code along with a runnable code below, in the form action just the current script only needs to be called :</p>
  
  <pre><code>enter code here
  use CGI;
  use CGI::Carp qw(fatalsToBrowser);
  
  my $qry = new CGI;
  
  &amp;main();
  
  sub main {
      $qry-&gt;header();
      my $body = &amp;display_page();
      print $body;
  
  }
  
  sub display_page {
      my $url = "current_script.cgi";
  
  
      print '&lt;pre&gt;' . Data::Dumper::Dumper( \%{$qry-&gt;Vars}) . '&lt;/pre&gt;';
  
      my $checked1 = "checked" if defined $qry-&gt;param('First') || '' ;
      my $checked2 = "checked" if defined $qry-&gt;param('Second') || '' ;
      my $checked3 = "checked" if defined $qry-&gt;param('Third') || '' ;
  
      my $html .= qq{&lt;br&gt;
     &lt;div&gt;
    &lt;div&gt;
    &lt;form name='myForm' action='$url' method=post&gt;\n};
    $html .=  $qry-&gt;textfield(-name=&gt;'TEXT_FIELD',
      -default=&gt;'Enter your text here',
      -size=&gt;35,
      -maxlength=&gt;50);
    $html .= "&lt;br&gt;&lt;br&gt; &lt;/div&gt;";
  
  
    $html .= qq{
   &lt;script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;  &lt;/script&gt;
   &lt;link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css'&gt;
   &lt;script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script src ="/js/testchkbox.js"&gt;&lt;/script&gt;
  };
  
  $html .= qq{
      &lt;table width = "90%" border="1" &gt;
      &lt;tr&gt;
      &lt;td&gt;
      &lt;div class="container" &gt;
      &lt;table id = "test" class="display compact cell-border table-bordered stripe row-border order-column" width="100%"&gt;
      &lt;thead&gt;
      &lt;tr bgcolor="skyblue"&gt;
          &lt;td&gt;Check&lt;/td&gt;
          &lt;td&gt;Name&lt;/td&gt;
          &lt;td&gt;DOB&lt;/td&gt;
          &lt;td&gt;Address&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="checkbox"  name = "Second" value = "1st" $checked1&gt;&lt;/td&gt;
          &lt;td&gt;Mark&lt;/td&gt;
          &lt;td&gt;11-22-15&lt;/td&gt;
          &lt;td&gt;London-101&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="checkbox"  name = "Second" value = "2nd" $checked2 &gt;&lt;/td&gt;
          &lt;td&gt;Sam&lt;/td&gt;
          &lt;td&gt;11-22-15&lt;/td&gt;
          &lt;td&gt;London-101&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="checkbox"  name = "Second" value = "3rd" $checked3&gt;&lt;/td&gt;
          &lt;td&gt;John&lt;/td&gt;
          &lt;td&gt;11-22-15&lt;/td&gt;
          &lt;td&gt;London-101&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;/div&gt;
  &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
      };
   $html .=  &lt;&lt;END;
  @{[ $qry-&gt;submit(-name=&gt;'STORE', -value=&gt;'Submit') ]}
  
  END
  
  $html .= "&lt;/form&gt;&lt;br&gt;&lt;/div&gt;";
  return $html;
  
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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: '&lt;"toolbar"&gt;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("&lt;a href='" + window.location.href + "/csv'" + bootstrapButton + "&gt;Export&lt;/a&gt;");
      */
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;pre&gt;$VAR1 = {};
  &lt;/pre&gt;&lt;br&gt;
      &lt;div&gt;
      &lt;div&gt;
      &lt;form name='myForm' action='current_script.cgi' method=post&gt;
  &lt;input type="text" name="TEXT_FIELD" value="Enter your text here" size="35" maxlength="50" /&gt;&lt;br&gt;&lt;br&gt; &lt;/div&gt; 
       
      
      
          &lt;table width = "90%" border="1" &gt;
          &lt;tr&gt;
          &lt;td&gt; 
          &lt;div class="container" &gt;
          &lt;table id = "test" class="display compact cell-border table-bordered stripe row-border order-column" width="100%"&gt;
          &lt;thead&gt;
          &lt;tr bgcolor="skyblue"&gt; 
              &lt;td&gt;Check&lt;/td&gt;
              &lt;td&gt;Name&lt;/td&gt;
              &lt;td&gt;DOB&lt;/td&gt;
              &lt;td&gt;Address&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="checkbox"  name = "Second" value = "1st" &gt;&lt;/td&gt;
              &lt;td&gt;Mark&lt;/td&gt;
              &lt;td&gt;11-22-15&lt;/td&gt;
              &lt;td&gt;London-101&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="checkbox"  name = "Second" value = "2nd"  &gt;&lt;/td&gt;
              &lt;td&gt;Sam&lt;/td&gt;
              &lt;td&gt;11-22-15&lt;/td&gt;
              &lt;td&gt;London-101&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="checkbox"  name = "Second" value = "3rd" &gt;&lt;/td&gt;
              &lt;td&gt;John&lt;/td&gt;
              &lt;td&gt;11-22-15&lt;/td&gt;
              &lt;td&gt;London-101&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;/div&gt;
           &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/table&gt;
          &lt;input type="submit" name="STORE" value="Submit" /&gt;
  
  &lt;/form&gt;&lt;br&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>