0

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

<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>");
}

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

正如您所看到的，我尝试附加到表单本身而不是表格，但这没有奏效（它们没有显示） - 有谁知道将表单元素动态添加到表格的诀窍是什么？被它周围的形式“检测到”？

谢谢 ：）

4

2 回答 2

2

这里的问题不在于“检测”添加的字段——这总是很有效。您真正的问题是您将“表格”标签作为“表格”的子标签，但这是不允许的，浏览器将其视为错误。浏览器试图修复它 - 并且不能做任何事情，然后立即关闭“表单”标签并尝试将其所有内容移到外面。（尽可能多地给你）。之后它找到了一个丢失的“/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>

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

要修复它，您可以执行以下操作之一：

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

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

于 2012-08-08T11:18:09.940 回答
1

尝试执行 $.ajax(type post) 或 $.post 并将 $('#family').serialize() 作为数据传递。

于 2012-08-08T09:56:15.807 回答