如何在具有多行且动态构建的数据表中提交表单

how to submit a form within a datatable that has multiple rows and is built dynamically?

本文关键字：构建 数据表 表单 提交 动态      更新时间：2023-09-26

好吧，我真的不太擅长在这里提交问题，所以如果我没有把所有的标记都写对，请原谅我。我正在构建一个包含行数据的表单，其中几个字段是输入，并且行都包含匹配的数据。也就是说，每行包含相同的字段。这是我的表单的html…

echo "<div id='display-wrapper' style='position:absolute;
    left:-100000px;'><form method='post'><table id='uploan' class='table-striped table-bordered'><thead><tr>";
        $TtlReactHeaderNames = array_keys($TtlReactQuery[1]);
        foreach($TtlReactHeaderNames as $TtlReactkey=>$TtlReactvalue) {
            echo "<th>" . $TtlReactvalue . "</th>";
        }    
        echo "<th class='green'>Revised BB Value</th><th class='green'>Revised Max Loan Capacity</th></tr></thead><tbody>";
        foreach($TtlReactQuery as $TtlReactkey=>$TtlReactvalue) {
            echo "<tr>";
            echo "<td>" . $TtlReactvalue['Store Name'] . "</td>";
            echo "<td>" . $TtlReactvalue['VIN Number'] . "</td>";
            echo "<td><input type='text' name='display-name' value='" . $TtlReactvalue['Full Name'] . "' readonly /></td>";
            echo "<td>" . $TtlReactvalue['SSN(Last Four)'] . "</td>";
            echo "<td>" . $TtlReactvalue['Ecash Vehicle Value'] . "</td>";
            echo "<td>" . $TtlReactvalue['Max Capacity'] . "</td>";
            echo "<td><input type='text' name='revised-bb-value' /></td>";
            echo "<td><input type='text' name='revised-max-loan-capacity' /></td>";
            echo "</tr>";
        }
        echo "</tbody></table><input type='submit' /></form></div>";

…这个表格中大约有200行数据。最终用户将只选择一行，在空白字段中填写信息，然后提交。但就像现在一样，它只会提交最后一行的内容，因为所有的行输入都有相同的名称。我想添加一个计数器和附加名称属性与数字，以便每个字段都有一个唯一的名称，但我最终在POST数组中有一堆空字段，当我提交它，虽然数据也在那里，我不知道他们要填写什么行，所以我不知道从POST数据抓取什么。有人建议使用javascript来填充表单的隐藏表单，但我不确定如何去做。任何帮助都会非常感激!!

有三个选项:

选项# 1:

由于默认情况下所有输入都是空的，因此将输入名称更改为包含一组括号:<input type='text' name='revised-bb-value[]' />。这将为您提供一个值数组。假设你有相同数量的输入，$_POST['revised-bb-value'][5]将和$_POST['display-name'][5]在同一行。您所需要做的就是循环遍历输入:

for($i = 0; $i < count($_POST['display-name']; $i++) {
   if($_POST['revised-bb-value'][$i] == '' && $_POST['revised-max-loan-capacity'][$i]  == '')
      continue;
   }
   /* process row */
}

缺点是提交空记录(尽管仍然不是过多的数据)。

选项# 2:

每行创建一个表单。

这样做的缺点是，当你需要在每行旁边都有一个"提交"按钮时，它会变得很难看，容易出错。您可以编写javascript，将提交按钮onFocus()附加到行，但是您仍然有很多不必要的表单，并且这不是完全"正确"的html语法。

选项# 3

使用JavaScript，当单击一行时，您可以动态地插入该行的字段。为每个tr和td指定唯一id，其中包含数据的唯一id(例如，数据库行唯一id)。例如<tr id='row[1365]'和<td id='row-bb-value[1365]'。

当用户单击该行时，用html输入和与该值匹配的预定义值替换该列的内容。通常，数据标签将用于存储原始内容，以防用户改变主意:

<td id='row-bb-value[1365]' data-original='30k'>30k</td>

该行的onClick函数会将其更改为:

<td id='row-bb-value[1365]' data-original='30k'><input type='text' name='revised-bb-value' value='30k' /></td>

您将对该行中的每个可编辑项执行此操作。

优点是可以在一个表单中进行多个编辑(选项#1的优点，选项#2的限制)，没有额外的按钮或html(选项#2的限制)，并且没有所有的空行(选项#1的缺点)。

通过创建一个大表单，您将需要为每个字段使用不同的名称。更好的解决方案是为每行数据创建一个表单。这样，您将有许多具有相同字段的表单，但只会发送一个。

输入必须有不同的名称。计数器方法是一个很好的方法，但是你必须将它附加在名称之后(例如:display-name0，而不是0display-name)。

然后在提交时，循环遍历所有行，仅对已填充值的行调用submit函数。

相关文章：