Datatables Jquery无法从表提交POST

Question

我使用 datatables jquery 作为表格插件来显示来自 mysql 的数据列表。 一切都很好，脚本运行良好。但是当我尝试从每一行提交数据表单时，页面不会加载任何内容。

这是我的源页面。

    <div id="product-grid" class="col-lg-6">
        <div class="txt-heading"><h3> Services </h3></div>
         <table class="table table-striped table-bordered table-hover " id="dataTables-example">
         <thead>
                <tr>
                    <th><strong>Name</strong></th>
                    <th><strong>Price</strong></th>
                    <th name="kategori"><strong>Kategori</strong></th>
                    <th><strong>Quantity</strong></th>
                    <th><strong>Action</strong></th>
                </tr>   
        </thead>
        <?php
        $product_array = runQuery("SELECT * FROM menu ORDER BY id ASC");
        if (!empty($product_array)) { 
            foreach($product_array as $key=>$value){
        ?>
        <form class="form-group" method="post" action="?action=add&code=<?php echo $product_array[$key]["code"]; ?>">
<tbody>
            <tr>
                <td><strong><?php echo $product_array[$key]["name"]; ?></strong></td>
                <td class="product-price"><?php echo $format->angka($product_array[$key]["price"]); ?></td>
                <td>    <?php echo $product_array[$key]["kategori"]; ?> </td>
                <td>    <input type="text" name="quantity" value="1" size="2" /> </td>
                <td> 
                    <input type="submit" value="Submit" class="btn btn-primary" />
                </td>
            </tr>
        </form>
        <?php }
        }?>
</tbody>
        </table>
    </div>

我通过 index.php 页面从 admin.php 加载这些代码..

<link href="<?php echo ASSETS.'bootstrap/dataTables/dataTables.bootstrap.css';?>" rel="stylesheet">  
<script src="<?php echo ASSETS.'bootstrap/js/bootstrap.min.js';?>"></script> 
<script src="<?php echo ASSETS.'bootstrap/dataTables/jquery.dataTables.js';?>"></script> 
<script src="<?php echo ASSETS.'bootstrap/dataTables/dataTables.bootstrap.js';?>"></script>

我想要的是，当用户单击提交时，表单被发布到 action.php 以处理脚本。

谢谢你..

Answer 1

表格不允许作为表格、tbody 或 tr 的子元素。

您可以在表单中包含整个表格。您可以在表格单元格中有一个表格。表格中不能包含表格的一部分。

在整个表格周围使用一种表格。然后使用单击的提交按钮来确定要处理的行（快速）或处理每一行（允许批量更新）。

一切都好。把你的<form> & </form> 放在桌子外面。

<table></table> 应该在 <form></form> 里面

例如：（正确方式）

<form method="POST">
    <table id="mytable">
        <tr>
          <td>
            <input name="s1" type="text" />
          </td>
          <td>
            <input name="s2" type="text" />
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="submit" name="submit" value="insert" />
          </td>
        </tr>
    </table>
</form>

而且，这是错误的方法。

<table id="mytable">
    <form method="POST">
        <tr>
            <td>
                 <input name="s1" type="text" />
            </td>
            <td>
                 <input name="s2" type="text" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                 <input type="submit" name="submit" value="insert" />
            </td>
        </tr>
    </form>
</table>

更多信息，请查看Can't put PHP form in a table & Form doesn't accept all inputs rows in my form

自从 OP 询问如何做。

我的意见是，使用<table></table> 仅用于显示数据。因为你不能在<table></table> 中使用<form></form>。 Make One Column Action，您可以在其中将值传递给具有该行 ID 的其他页面。并且，在该页面（我写的其他页面）中，显示该产品的数据（如果需要），包括要提交的Quantity。这只是一个建议。希望你能理解。

<div id="product-grid" class="col-lg-6">
    <div class="txt-heading"><h3> Services </h3></div>
        <table class="table table-striped table-bordered table-hover " id="dataTables-example">
            <thead>
                <tr>
                <th><strong>Name</strong></th>
                <th><strong>Price</strong></th>
                <th name="kategori"><strong>Kategori</strong></th>
                <th><strong>Action</strong></th>
                </tr>   
            </thead>
            <tbody>
            <?php
            $product_array = runQuery("SELECT * FROM menu ORDER BY id ASC");
            if (!empty($product_array)) { 
                foreach($product_array as $key=>$value) {
                ?>
                    <tr>
                        <td><strong><?php echo $product_array[$key]["name"]; ?></strong></td>
                        <td class="product-price"><?php echo $format->angka($product_array[$key]["price"]); ?></td>
                        <td><?php echo $product_array[$key]["kategori"]; ?> </td>
                        <td>
                            <a href="Edit-Somepage.php?id=<?php echo $product_array[$key]["id"]; ?>">Edit</a>
                        </td>
                    </tr>
                <?php }
            }?>
            </tbody>
        </table>
    </div>
</div>

Edit-Somepage.php

<?
$id=$_GET['id'];
$product_array = runQuery("SELECT * FROM menu WHERE id='$id'");
foreach($product_array as $key=>$value) {
    $product_name=$product_array[$key]["name"];
    $product_price=$format->angka($product_array[$key]["price"]);
}
?>
<form class="form-group" method="post" action="submit-SomePage.php">
    <?echo $product_name;?><br>
    <?echo $product_price;?><br>
    <input type='hidden' value="<?echo $id;?>" name='ProductId'>
    <input type="text" name="quantity" value="1" size="2" /> <br>
    <input type="submit" value="Submit" class="btn btn-primary" />
</form>

提交-SomePage.php

<?
$product_id=$_POST['ProductId'];

using this $product_id save/update/submit product.
//Update Query.
?>

Answer 2

从@nana 答案中获取帮助，您可以这样做

Form 是 的无效子级，但在

下有效

<tr>
<td> some field
<td> some other field
<td> **<form method="post">**somefield, some hidden field**</form>**
</td>

这样你就有了有效的表单元素。您可以包含您需要的隐藏元素，因此可以从 jQuery DataTable 中提交表单。

Answer 3

你可以试试下面的代码：

<form action="" method="POST">
  <table border="1">
    <tr>
      <td>
        <input type="text" name="usrname" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="email" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="password" name="password" />
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <input type="submit" name="submit_btn" value="login">
      </td>
    </tr>
  </table>
</form>