添加输入字段表单php时更改了dom答案

【问题标题】：changed dom when added input field form php添加输入字段表单php时更改了dom
【发布时间】：2014-07-09 10:04:56
【问题描述】：

order.html.php 的代码：

<body>
<p> Place order</p>

<table>
    <thead>
        <tr>
            <th>Item No.</th>
            <th>Name</th>
            <!--<th>Mrp</th>-->
            <th>Price</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <form id="form1" action="" method="post" >
        <tbody>
            <?php $id = 0 ;foreach ($dataProduct as $productData): ?>
            <tr>
                <td><?php echo ++$id ; ?></td>
                <td><?php echo $productData['productName']; ?></td>
                <td><?php echo $productData['productPrice'];?></td>
                <td><input type="number" name="<?php echo $productData['productId']; ?>"/></td>
            </tr>
        <?php endforeach; ?>
        <div><input type="hidden" name="add" value="placeorder"/>
            <input type="submit"  value="Place Order"/>
            <div>
            </tbody>
        </form>
    </table>
</body>

开发者工具中呈现的dom是：

<body>
<p> Place order</p>

<div><input type="hidden" name="add" value="placeorder">
            <input type="submit" value="Place Order">
            <div>
            </div></div>
 <table>
    <thead>
        <tr>
            <th>Item No.</th>
            <th>Name</th>
            <!--<th>Mrp</th>-->
            <th>Price</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <form id="form1" action="" method="post" ></form>
        <tbody>
                            <tr>
                <td>1</td>
                <td>hp keyboard old</td>
                <td>400</td>
                <td><input type="number" name="1"></td>
            </tr>
                        <tr>
                <td>2</td>
                <td>lenovo keyboard old</td>
                <td>450</td>
                <td><input type="number" name="2"></td>
            </tr>
                        <tr>
                <td>3</td>
                <td>kaspersky antivirus</td>
                <td>430</td>
                <td><input type="number" name="9"></td>
            </tr>
                    </tbody>

    </table>

   </body>

在 order.html.php 和生成的 dom 中查看提交的位置。由于这个 dom 结构 order.html.php 无法提交驻留在输入字段中的值。

这是有相关问题的帖子，但不完全是这里所代表的内容， Retrieve data from HTML table to PHP

【问题讨论】：

您的 HTML 无效，这就是原因。
html 有效。现在看@think
不，这不是@devprashant。查看你的 HTML >>> 你不能在tad之后放置表单标签，你不能在关闭tr之后放置div
谢谢。这对我来说是新事物。 @想想

标签： php html html-table html-tableextract

【解决方案1】：

尝试正确的html结构：

     <body>
        <p> Place order</p>
        <form id="form1" action="" method="post" >
        <table>
            <thead>
                <tr>
                    <th>Item No.</th>
                    <th>Name</th>
                    <!--<th>Mrp</th>-->
                    <th>Price</th>
                    <th>Quantity</th>
                </tr>
            </thead>

                <tbody>
                    <?php $id = 0 ;foreach ($dataProduct as $productData): ?>
                    <tr>
                        <td><?php echo ++$id ; ?></td>
                        <td><?php echo $productData['productName']; ?></td>
                        <!--<td><?php echo $productData['mrp']; ?></td>-->
                        <td><?php echo $productData['productPrice'];?></td>
                        <td><input type="number" name="<?php echo $productData['productId']; ?>"/></td>
                    </tr>
                <?php endforeach; ?>
                <tr>
                <td colspan="4">
                    <input type="hidden" name="add" value="placeorder"/>
                    <input type="submit"  value="Place Order"/>
                </td></tr>                
            </tbody>

           </table>
        </form>
</body>

【讨论】：

和之前一样。见上面有人给出了背后的原因。
@devprashant 什么原因？

【解决方案2】：

首先，只需使用<form> 标记包装表格即可。
其次，将productId 用作name="$productId" 并不是很好，而是使用name="products[$productId]" 之类的东西，这样在提交表单后，它们将被分组到与数组相同的变量中。

示例代码：Sample Demo

$dataProduct = array(
    array('productId' => 1, 'productName' =>'hp keyboard old',  'productPrice' => 400),
    array('productId' => 2, 'productName' =>'lenovo keyboard old', 'productPrice' => 430),
    array('productId' => 9, 'productName' => 'kaspersky antivirus', 'productPrice' => 430),
);

if(isset($_POST['submit'])) {
    $values = $_POST['products']; // get all the grouped values
    $total = array();
    foreach($values as $productId => $quantity) { // loop values
        foreach($dataProduct as $productData) {
            if($productData['productId'] == $productId) {
                // simple multiplication, quantitiy times price for each item
                $total[$productId] = $productData['productPrice'] * $quantity;
            }   
        }
    }

    echo '<pre>';
    print_r($total);
    echo '</pre>';
}

?>

<form method="POST">
<table cellpadding="10">
    <thead>
        <tr>
            <th>Item No.</th>
            <th>Name</th>
            <!--<th>Mrp</th>-->
            <th>Price</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <?php $id = 0 ; foreach($dataProduct as $productData): ?>
        <tr>
            <td><?php echo ++$id ; ?></td>
            <td><?php echo $productData['productName']; ?></td>
            <td><?php echo $productData['productPrice'];?></td>
            <td><input type="number" name="products[<?php echo $productData['productId']; ?>]"/></td>
        </tr>
        <?php endforeach; ?>
        <tr>
            <td><input type="submit" name="submit" /></td>
        </tr>
    </tbody>
</table>
</form>

例如，在表单中，我在所有文本框中输入了 2 的数量。print_r() 应该是这样的：

Array
(
    [1] => 800
    [2] => 860
    [9] => 860
)

索引为键，值为每个数量乘以价格的总和

【讨论】：