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

Add a field to an HTML form in a table using jQuery

本文关键字：HTML 表单 jQuery 字段 添加 使用      更新时间：2023-09-26

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

<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"按钮将被 POST （我认为这表明我的发布逻辑有效，但它只是没有检测到动态添加的字段）。

如您所见，我尝试附加到表单本身而不是表格，但这不起作用（它们没有显示） - 有谁知道将表单元素动态添加到表格中的诀窍是什么，在那里它们将被周围的表单"检测到"？

谢谢:)

这里的问题不在于"检测"添加的字段 - 这总是非常有效的。您真正的问题是您将"form"标签作为"table"的子标签，但这是不允许的，并且被浏览器视为错误。 浏览器试图修复它 - 并且不能做更多的事情，然后立即关闭"表单"标签并尝试将所有内容移出。（尽可能多地给你）。之后，它找到了一个丢失的"/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 属性 - 并且它们不会被 POST ），并且您必须将第一个按钮的类型从"提交"更改为"按钮"，这样它就不会触发表单提交。
  • 将"form"标签放在表外的"td"或整个表单中。在这种情况下，您需要更改创建属性字段的方式，使其看起来完全符合您的要求。（请记住，您不能直接向表单添加新的"TD"，您必须在表单内创建一个新表，并向其中添加单元格和行。您可以设置所有样式以获得所需的内容。

附言。此外，新创建的隐藏元素和复选框的名称相同。确定这正是您想要的 - 行为可能是意外的。

尝试做一个 $.ajax（type post） 或 $.post 并将 $（'#family'）.serialize（） 作为数据传递。

相关文章：