Question

我有一个表，可以包含任意多行。这些行中的每一行都包含表单字段的元素。最初，它看起来像这样：

<table border="2" id="familyHeader">
  <tr>
    <th>Description</th>
    <th>Still associated?</th>
  </tr>
  <tr id="addNewChildRow"> 
    <td> 
      <input type="text" ....> 
      <input type="text" ....>
    </td> 
    <td> 
      <input type="submit" ....>  <!-- this is intentionally not part of a form element -->
    </td> 
  </tr>

<form id="family" method="post" action="php/update_children.php">
  <tr id="updateChildrenRow">
    <td> > > > > > > </td>
    <td> 
      <input type="submit" id="updateChildren" name="updateChildren" class="updateChildren" value="Update Children"/> 
    </td>
  </tr>
</form>
</table>

所以基本上顶部允许你输入细节 - 在第一个“提交”按钮上有一个捕获，它向表中添加行。它使用此JavaScript / jQuery在最后一行（希望在表单元素中）之前添加它们：

function insert_child(id, type, snumber, serialnumber)
{
    $('#updateChildrenRow').before("<tr> <td>"+ type+" | "+snumber+" | "+serialnumber +"</td>"
    //$('#family').append("<tr> <td>"+ type+" | "+snumber+" | "+serialnumber +"</td>"
       + "<td> <input type=\"hidden\" name=\""+id+"\" value=\"false\" />" 
       + "<input type=\"checkbox\" checked=\"true\" name=\""+id +"\" value=\"true\"/> </td>"
       + "</tr>");
}

这是有效的，因为它将元素插入到正确的位置，但是当我们提交表单时，数据不会被POST。但是，如果我们将表单元素开放移动到第二行并提交，则“addNewChildRow”按钮将被POST（我假设我的发布逻辑工作正常，但它只是没有检测到动态添加的字段）。

正如你所看到的，我已经尝试过附加到表单本身而不是表格，这没有用（它们没有显示） - 有没有人知道将表单元素动态添加到表格的技巧是什么它们将被围绕它的形式“检测”到哪里？

谢谢:)

Answer 1

尝试使用$ .ajax（type post）或$ .post并传递$（'＃family'）。serialize（）作为数据。

Answer 2

这里的问题不在于“检测”添加的字段 - 这总是非常有效。你真正的问题是你把'form'标签作为'table'的子项，但是这是不允许的，并且被浏览器视为错误。浏览器尝试修复它 - 并且不能再做任何事情，然后立即关闭'form'标记并尝试将所有内容移到外面。（尽可能多地给你）。之后，它找到了丢失的'/ form'，然后将其擦除。

您的标记已转换为：


<table border="2" id="familyHeader">
 .......
<form id="family" method="post" action="php/update_children.php"></form>

  <tr id="updateChildrenRow">
    <td> > > > > > > </td>
    <td> 
      <input type="submit" id="updateChildren" name="updateChildren" class="updateChildren" value="Update Children"/> 
    </td>
  </tr>
</table>

现在，您的新输入刚刚在表单外创建。

要解决此问题，您可以执行以下操作之一：

将整个表放入'form'标签。最简单的方法，但在这种情况下，您将有两个额外的输入（不是问题 - 只是不添加名称属性 - 并且它们不会被POST），您必须将第一个按钮的类型从“提交”更改为“按钮”，这样就不会触发表单提交。
将'form'标记放在表格之外的'td'或整个表单中。在这种情况下，您需要更改创建attitional字段的方式，使其看起来与您完全一样想。（记住你不能直接在表单中添加新的'td' - 你必须在表单中创建一个新表并向其添加单元格和行。你可以设置所有内容以获得你想要的东西。

PS。此外，对于新创建的隐藏元素和复选框，您具有相同的名称。确保这正是您想要的 - 行为可能是意外的。

使用jQuery在表中的HTML表单中添加字段

2 个答案: