表单操作不适用于表单内的表格答案

【问题标题】：Form action not working with table inside form表单操作不适用于表单内的表格
【发布时间】：2021-09-22 04:22:12
【问题描述】：

我在这样的表格中有一个表格：

    <form action="file.php" id="myform" method="POST">
            <div class="table-responsive ">
                <table class="table table-hover" id="tblDetalle">
                    <thead class="thead-dark">
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Quant.</th>
                            <th>Price</th>
                            <th>Total Price</th>
                        </tr>
                    </thead>
                    <tbody">
                        <?php
                        if(!isset($_SESSION['products'])){
                        }else{
                            foreach($_SESSION['products'] as $product=>$details){    
                                echo '
                                    <tr class="txtMult">
                                        <th scope = "row">'.$details["code_product"].'</th>
                                        <th scope = "row">'.$details["name_product"].'</th>
                                        <td><input class="val2" type="number" id="quantity" name="quantity" min="1" max="100"></td>
                                        <td class="val1">'.$details["price"].'</td>
                                        <td><span class="multTotal">0.00</span></td>
                                    </tr>                                
                                ';
                            };
                        }
                        ?>
                    </tbody>
                    <tfoot>
                        <tr class="font-weight-bold">
                            <td colspan=4>Total <span id="grandTotal">0.00</span></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
                <input type="submit" value="Submit"/>
            </div>
        </form>

我的实际问题是提交按钮不起作用，单击按钮时未采取任何操作。我的想法是通过 POST 方法将表的所有内容发送到 file.php。

有一个脚本最后更新价格*数量，但我认为问题不存在。

<script  type="text/javascript">
    $(document).ready(function () {
        $(".txtMult input").keyup(multInputs);
        function multInputs() {
            var mult = 0;
            // for each row:
            $("tr.txtMult").each(function () {
                // get the values from this row:
                var $val1 = parseInt($('.val1', this).text())
                var $val2 = $('.val2', this).val();
                var $total = ($val1 * 1) * ($val2 * 1)
                $('.multTotal',this).text($total);
                mult += $total;
            });
            $("#grandTotal").text(mult);
        }
    });
</script>

有人可以帮忙吗？ :)

【问题讨论】：

在第 13 行，将更改为并重试
在 PHP 循环中，您重复 id="quantity" ~ ID 必须是唯一的。
输入元素quantity 如果您希望为其发送多个值，则应将其命名为quantity[]。看起来这是唯一的输入元素，但据我所知，无法确定哪个数量指的是哪个产品
不能通过post表单获取整个表格，只能通过该方法获取输入字段值，然后需要在该file.php页面上用post表单数据排列表格

【解决方案1】：

一旦 HTML 中的小错字被纠正并且没有您的 PHP 逻辑（无法测试它 - 因此硬编码的虚拟数据），您可以做的是使用 Javascript 发送表单数据而不是依赖常规表单提交在这里对你来说是失败的。 HTML 内容和文本不会通过表单发送 - 仅来自 input 元素的内容，因此您的表单将提交一个名为 quantity 的单个字段，这不是您想要的。

以下使用fetch 将formData 发送到您想要的PHP 脚本。

$(document).ready(function () {
    function multInputs() {
        var mult = 0;
        $("tr.txtMult").each(function () {
            var $val1 = parseInt($('.val1', this).text())
            var $val2 = $('.val2', this).val();
            var $total = ($val1 * 1) * ($val2 * 1)
            $('.multTotal',this).text($total);
            mult += $total;
        });
        $("#grandTotal").text(mult);
        return mult;
    }
    
    
    const submithandler=(e)=>{
      // stop the regular `submit`
      e.preventDefault();
      
      // add form data to these variables
      let fd=new FormData();
      let payload=[];
      
      // process the contents of the HTML table to populate the formData object
      $("tr.txtMult").each(function(){
        let item={
          code:this.firstElementChild.textContent,
          name:this.firstElementChild.nextElementSibling.textContent,
          value:$('.val2', this).val()
        };
        
        // convert object to string
        payload.push( JSON.stringify(item) );
      });
      
      fd.set('payload', payload );
      
      // send the request
      fetch( document.getElementById('myform').action,{ method:'post', body:fd })
        .then( r=>r.text() )
        .then( text=>{
          alert( text )// do stuff with results?
        })
        .catch( err=>console.log('Error:%o',err) )
    };
    
    
    $(".txtMult input").keyup(multInputs);
    $('[type="submit"]').click(submithandler);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form action="file.php" id="myform" method="POST">
            <div class="table-responsive ">
                <table class="table table-hover" id="tblDetalle">
                    <thead class="thead-dark">
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Quant.</th>
                            <th>Price</th>
                            <th>Total Price</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                    <!-- Hardcoded example data -->

                        <tr class="txtMult">
                            <th scope = "row">Code ABC-1</th>
                            <th scope = "row">Name - 1</th>
                            <td><input class="val2" type="number" name="quantity" min="1" max="100"></td>
                            <td class="val1">100</td>
                            <td><span class="multTotal">0.00</span></td>
                        </tr>
                        
                        <tr class="txtMult">
                            <th scope = "row">Code ABC-2</th>
                            <th scope = "row">Name - 2</th>
                            <td><input class="val2" type="number" name="quantity" min="1" max="100"></td>
                            <td class="val1">200</td>
                            <td><span class="multTotal">0.00</span></td>
                        </tr>
                        
                        <tr class="txtMult">
                            <th scope = "row">Code ABC-3</th>
                            <th scope = "row">Name - 3</th>
                            <td><input class="val2" type="number" name="quantity" min="1" max="100"></td>
                            <td class="val1">300</td>
                            <td><span class="multTotal">0.00</span></td>
                        </tr>
                        
                        
                        
                        
                        
                        
                    </tbody>
                    <tfoot>
                        <tr class="font-weight-bold">
                            <td colspan=4>Total <span id="grandTotal">0.00</span></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
                
                <input type="submit" />
                
            </div>
        </form>

【讨论】：

这正是我想要做的。谢谢教授！

【解决方案2】：

可以在表单中使用表格，但我认为您的方法是错误的。您可以将表格放入表单中，反之亦然，这样做通常很有用。但是您需要了解自己在做什么。

表格和表单可以任意嵌套。但是，如果您将表格放入表格中，则每个表格必须完全包含在单个表格单元格中（实际上是一个 TD 元素）。因此，表格中的每一个都是完全独立的。所以试着把表格放在需要输入的表格单元格中

【讨论】：