Question

由于<form>无法在<tr>内，我无法为每一行分配表单。最后我创建了一个像这样的

<form>
<table>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
</table>
</form>

所以，当我提交数据时，它似乎提交了每个输入，我怎么才能只发送一个特定的行？感谢

Answer 1

由于表单会发送所有值（因为您使用<button>），因此您可以为每一行分配与该行对应的键。然后在文本框中使用它。注意：文本框值必须是数组结构，以便可以使用提交更新中的特定键（有点像过滤）。考虑这个例子：

<?php

if(isset($_POST['update'])) {
    $product_key = $_POST['update'];
    $product_name = $_POST['my_product_name'][$product_key];
    echo $product_name;
    // this should correspond to that same textbox row that you selected
}

?>

<form method="POST" action="">
    <table>
        <tr>
            <td><input type="text" name="my_product_name[1]"></td>
            <td><button name="update" type="submit" value="1">Update</button></td>
        </tr>
        <tr>
            <td><input type="text" name="my_product_name[2]"></td>
            <td><button name="update" type="submit" value="2">Update</button></td>
        </tr>
    </table>
</form>

Answer 2

这是不可能的。表单会发送其中的所有内容。您必须使用多个表单才能执行此操作。你能解释为什么要分别发送每一行。让我们知道完整的问题，以便我们为您提供更好的解决方案：）

Answer 3

收集值，然后将其推送到提交表单中。

<script>
    function dosubmit(e){
        var value = $(this).parents('tr').find('input.some').val();
        $(this).parents('tr').find('input.my_product_name').val(value);
    }
</script>

<table>
    <tr>
        <td><input name="some"/></td>
        <td>
            <form onsubmit="dosubmit(event)">
                <input type="hidden" name="my_product_name"/>
                <input type="submit" value="Submit">
            </form>
        </td>
    </tr>
    <tr>
        <td><input name="some"/></td>
        <td>
            <form onsubmit="dosubmit(event)">
                <input type="hidden" name="my_product_name"/>
                <input type="submit" value="Submit">
            </form>
        </td>
    </tr>
    <tr>
        <td><input name="some"/></td>
        <td>
            <form onsubmit="dosubmit(event)">
                <input type="hidden" name="my_product_name"/>
                <input type="submit" value="Submit">
            </form>
        </td>
    </tr>
</table>

我不知道jsbin会有多好，但是here it is

Answer 4

您必须使用单独的表格。为避免此问题，您可以尝试使用div并使用css设置样式。

<div class="big-wrapper">
<div class="form-wrapper">
    <form id="first-input">
        <input name="my_product_name">
        <button type="submit">Click Here To Submit Form 1</button>
    </form>
</div>
<div class="form-wrapper">
    <form id="second-input">
        <input name="my_product_name">
        <button type="submit">Click Here To Submit Form 2</button>
    </form>
</div>

上述代码的示例（没有额外的css）：http://postimg.org/image/p0olzl933/

Answer 5

一种方法是使表单标记包装表，每个表有效地成为一行。

老实说，有很多方法可以做到这一点......你可以使用Javascript来处理它，就像我在下面那样，或者生成一个带有服务器端脚本的特殊表并将其写入页面。您可以使用ajax调用将更改的值发送到Web服务等。

希望这一点。

<form>
<table>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
</table>
</form>

<form>
<table>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
</table>
</form>

...

Answer 6

您可以通过设置隐藏参数来提交表格中的值，如下所示：

<强> HTML：

<form action="" id="formId">
 <input type="hidden" name="product_name" id="hiddenValue" />
</form>
<table>
  <tr>
     <td><input name="my_product_name"></td>
     <td><button type="submit" onclick="submitForm(this)"></td>
  </tr>
  <tr>
     <td><input name="my_product_name"></td>
     <td><button type="submit" onclick="submitForm(this)"></td>
  </tr>
</table>

<强>脚本：

<script>
    function submitForm(id){
        var input = id.parentElement.parentElement.getElementsByTagName("input")[0].value;
        //Retrieving value of specific rows
        document.getElementById("hiddenValue").value = input;
        //Submits the form with given id.
        document.getElementById("formId").submit();
    }
</script>

如何更新HTML中特定表行的数据？

6 个答案: