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：

Execute Playground

这打破了代码。您的浏览器并不真正知道表单的结束位置，因此复选框无法提交。

如果您的＆＃34;文本框周围需要<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>，请将其放在＆＃34;文本框＆＃34;像这样：

div

一般情况下检查html是否存在语法错误（https://validator.w3.org/）。

提交表单时，数据表中的复选框无法正常工作

1 个答案: