从表单中删除输入后提交失败（在 Firefox 中）答案

【问题标题】：submit fails after input is removed from form (in Firefox)从表单中删除输入后提交失败（在 Firefox 中）
【发布时间】：2012-07-19 22:40:11
【问题描述】：

编辑：我简化了使用文本输入的示例。同样的错误。从表单中删除输入时，表单无法提交。编辑：在 Firefox 14 中重复。Chrome 没有相同的行为。

我有一个带有 jquery 的多文件上传表单，可以在表单中添加和删除文件输入元素。如果我删除其中一个输入，则 form.submit() 函数不会继续。下面是使用“文本”输入的简化代码。还有http://jsfiddle.net/carbontax/rMMuE/的小提琴

    <form id="form-foo" method="POST">
        <div id="input-container-container">
       </div>
    </form>
    <input type="button" id="add-text-input" value="ADD TEXT INPUT">
    <input type="button" id="submit" value="SUBMIT">

脚本

    $('#submit').click(function() {
        $('#form-foo').submit();
    });

    $("#add-text-input").click(function() {
        var div = $('<div/>', {
            'class': 'input-container'
        }).append($('<button/>', {
            'class': 'delete-text-input',
            html: "X"
        }));
        var input = $('<input/>', {
            type: 'text',
            name: 'texts',
            'class': 'input-text'
        }).appendTo(div);
        div.appendTo($('#input-container-container'));
    });

    $('#form-foo').on('click', 'button.delete-text-input', function(e) {
        e.preventDefault();
        $(this).closest('div').remove();
    });

【问题讨论】：

你检查 JS 错误了吗？如果您要从表单中删除元素，但没有删除任何专门处理这些元素的 JS 代码，那么您最终可能会遇到一堆错误。
没有错误。根据 jquery 文档。 $.remove() 从 DOM 中删除所有处理程序以及 HTML。

标签： javascript jquery file-upload

【解决方案1】：

Satya Teja 有一个有用的建议，将提交按钮放在表单中，但我不知道它为什么会起作用。就我而言，我需要根据另一个事件的结果间接提交表单。所以这里是解决方案。

HTML：在表单中添加一个隐藏的提交按钮

    <form id="form-foo" method="POST">
        <div id="input-container-container">
       </div>
       <!-- workaround to allow submit after deleting a form element -->
       <input type="submit" id="form-foo-submit" style="display: none"/>
    </form>
    <input type="button" id="add-text-input" value="ADD TEXT INPUT">
    <input type="button" id="submit" value="SUBMIT">

脚本。不要在表单上调用 submit()，而是在隐藏的提交按钮上调用 click()。适用于 Firefox、Chrome 甚至 IE6

    $('#submit').click(function() {
        // Instead of calling $('#form-foo').submit()
        $('#form-foo-submit').click();
    });

    $("#add-text-input").click(function() {
        var div = $('<div/>', {
            'class': 'input-container'
        }).append($('<button/>', {
            'class': 'delete-text-input',
            html: "X"
        }));
        var input = $('<input/>', {
            type: 'text',
            name: 'texts',
            'class': 'input-text'
        }).appendTo(div);
        div.appendTo($('#input-container-container'));
    });

    $('#form-foo').on('click', 'button.delete-text-input', function(e) {
        e.preventDefault();
        $(this).closest('div').remove();
    });

【讨论】：

【解决方案2】：

保持在表单内部而不是外部提交..

<form id="form-foo" method="POST">
        <div id="input-container-container">
        </div>

    <input type="button" id="submit" value="SUBMIT">
    </form>

提交

【讨论】：

这不合适。我正在简化我的例子。在外部调用表单提交。
+1 这是一个有用的建议，尽管我不能按原样使用它，因为我需要从表单外部调用 submit()。我仍然想知道为什么 submit() 函数在删除输入时停止工作。

【解决方案3】：

由于您的输入位于表单外部，因此没有一个输入。确保您要发送的所有数据都在表单标签之间。

【讨论】：

不正确，TurdPile。输入被添加到表单中。注意这一行： div.appendTo($('#input-container-container'));但这是一个有趣的名字。