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

Question

我的页面设计有一个表单，该表单在顶部包含一个文本框，包含在一个 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>

Answer 1

你不能这样写你的 html:

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

这破坏了代码。您的浏览器并不知道表单在哪里结束，因此不会提交复选框。

如果您需要在“文本框”周围放置一个 div，请像这样将它放在“文本框”周围:

<div>
    <input type="text" name="TEXT_FIELD" value="Enter your text here" size="35" maxlength="50" /><br><br>
</div> 

通常检查您的 html 是否存在语法错误 (https://validator.w3.org/)。