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

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

我有一个带有jquery的多文件上传表单，可以在表单中添加和删除文件输入元素。如果删除其中一个输入，form.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();
    });

$（“#提交”）。单击（函数（）{
$（'#form foo'）。提交（）；
});
$（“#添加文本输入”）。单击（函数（）{
var div=$（''）{
“类”：“输入容器”
}).附加（$（''）{
“类”：“删除文本输入”，
html:“X”
}));
变量输入=$（''{
键入：“文本”，
名称：'文本'，
“类”：“输入文本”
}).附件（分部）；
div.appendTo（$（“#输入容器”）；
});
$（'#form foo'）。在（'click'，'button.delete text input'，函数（e）{
e、 预防默认值（）；
$（this）.closest（'div'）.remove（）；
});

将提交保存在表单内部而不是外部

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

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

---

提交

由于您的输入位于表单的外部，因此不会提交任何输入。确保您要发送的所有数据都在表单标签之间。

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">

剧本。调用隐藏的提交按钮上的click（），而不是在表单上调用submit（）。适用于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();
    });

$（“#提交”）。单击（函数（）{
//而不是调用$（'#form foo'）。submit（）
$（#form foo submit'）。单击（）；
});
$（“#添加文本输入”）。单击（函数（）{
var div=$（''）{
“类”：“输入容器”
}).附加（$（''）{
“类”：“删除文本输入”，
html:“X”
}));
变量输入=$（''{
键入：“文本”，
名称：'文本'，
“类”：“输入文本”
}).附件（分部）；
div.appendTo（$（“#输入容器”）；
});
$（'#form foo'）。在（'click'，'button.delete text input'，函数（e）{
e、 预防默认值（）；
$（this）.closest（'div'）.remove（）；
});

是否检查JS错误？如果您正在从表单中删除元素，但没有删除任何专门处理这些元素的JS代码，那么最终可能会出现一系列错误。根据jquery文档，$。remove（）从DOM中删除所有处理程序以及HTML。错误，TurdFile。在表单中添加输入。注意这一行：div.appendTo（$（“#输入容器”）；但这是一个有趣的名字。这不合适。我正在简化我的例子。在表单外部调用Submit。+1这是一个有用的建议，尽管我不能按原样使用它，因为我需要从表单外部调用Submit（）。我仍然想知道为什么在删除输入时submit（）函数停止工作。

    $('#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();
    });