不发布动态插入的表单输入

Posted 2023-05-09

【中文标题】不发布动态插入的表单输入

【英文标题】：dynamically inserted form inputs aren't posted

【发布时间】：2013-07-08 15:15:56

【问题描述】：

我通常不会真正寻求帮助，但当我这样做时，请相信我，我的研究做得很好，但一无所获。

让它变得简单，但相关。我有一个表格。其中一部分是这样的：

<div class="list-model">
    <div class="connected"><?=$items['connected']?></div>
    <div class="items"><?=$items['items']?></div>
</div>

当有人点击input 时，我想将其移动到另一个div。 我为此使用jQuery：

$(".list-model").delegate(".item input", "change", function()

    listModel = $(this).closest(".list-model");
    item = $(this).closest(".item");
    insertTo = $(this).is(":checked") ? "connected" : "items";
    insertTo = listModel.find("."+insertTo);
    $(insertTo).append(item);
);

jQuery 像魔术一样工作，.item 来回移动。

但是

一旦我“触摸”到实际的input，它就不会POST！

它不会显示在 Form Data 下的 Chrome 开发者工具中，也不会显示在服务器端。

【问题讨论】：

显示item DOM 元素的标记以及它们相对于form 标记的位置

【参考方案1】：

嗯...当然是我的错。

我正在使用一个超旧的框架，其中form 元素“卡”在table 元素中，在<table> 之后但在<tr> 之前。

我将<form> 放在<table> 之外，所以<form> 会正确地包裹<table>，它工作得很好。

【讨论】：

我遇到了完全相同的问题。如果表单位于表格元素内，知道为什么这是一个问题吗？

@Thoronwen 这正是 html 的工作方式。 <table> 内只允许使用特定的标签，如<tr>、<th> 等。 <form> 不是其中之一 (Tables chapter in W3Schools)。