提交动态生成的表单答案

【问题标题】：Submitting a dynamically generated form提交动态生成的表单
【发布时间】：2015-03-23 04:16:14
【问题描述】：

我正在创建一个网站，并且我有一个由 Django 创建的表单。加载页面后，用户可以通过单击按钮将文本输入添加到表单中。问题是当点击提交按钮时，只有最初由 Django 创建的文本输入才会被提交。换句话说，动态添加的额外文本输入不会被提交。

我猜这是因为提交按钮仅“知道”页面加载时存在的表单元素，而不是动态加载的元素。考虑到这一点，我猜我需要使用某种 Javascript 来提交所有表单元素，包括动态添加的元素，但我不知道该怎么做。

我已经尝试过 jQuery submit 函数，但我真的不知道我应该用它做什么。任何提示将不胜感激！

编辑：这是一个代码 sn-p，它显示了在将另外 2 个文本输入动态添加到“原点”后 HTML 的样子

<table>
    <form class="dataInput" action="/foner/116" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='YYuqTzXUVosu1s2HD3zS00DpoPwQ7N0k' />
    <tbody class="origin">
        <tr>
            <th>
                <label>Origin:</label>
            </th>
            <td>
                <input id="id_Origin-0" maxlength="200" name="Origin-0" type="text" value="A native of Georgia" /> // PRESENT AT PAGE LOAD
            </td>
            <td>
                <button class="adder origin">+</button> // USER CLICKS THIS TO APPEND MORE TEXT INPUTS TO THE FORM
            </td>
        </tr>
        <tr>
            <th>
            </th>
            <td>
                <input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
            </td>
        </tr>
        <tr>
            <th>
            </th>
            <td>
                <input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
            </td>
        </tr>
    </tbody>
    <tr>
        <th>
            <label>Notes:</label>
        </th>
        <td>
            <input class="submitButton" type="submit" value="S" />
        </td>
    </tr>
    </form>
</table>

【问题讨论】：

您是否检查过动态添加的输入元素是否已添加到您提交的表单中，而不是其他元素中？
@Arkantos 我是新手——我该怎么做？
@ArturFilipiak .. 这与事件委托有什么关系:)？我认为这不是绑定事件处理程序，而是提交修改后的表单
@BrianSnow 新的建议的工作示例。您可以使用 $('form').serialize() 和 ajax 提交 forn
右键单击您的表单..检查元素并查看动态添加的文本输入是否在您发布的form内..

标签： javascript jquery html

【解决方案1】：

好的，我能够解决问题。我有一个表格，用于安排表单的所有文本输入，并且该表格还包含了表单本身。事实证明，通过反转这一点，并将表格包含在表单中，所有动态生成的输入都会成功发布。再次感谢那些在上述 cmets 中提供意见的人 - 获得其他意见和观点总是有帮助的。

所以我的问题是（我知道你不应该在答案中提问，但如果有人想回答......）：我应该怎么知道这个？如果您使用的是编译语言，那么编译器可能会为您捕捉到这一点。它只是你通过经验掌握的那种东西吗？有没有什么书可以帮助我解决这样的基本问题？我发现 Web 开发非常乏味和令人沮丧，因为我经常因为像这样的微不足道的错误而长时间挂断，我假设它不必是这样的；我只是不太知道如何改进。

【讨论】：