Javascript form.submit() 在 Firefox 中不起作用答案

【问题标题】：Javascript form.submit() not working in FirefoxJavascript form.submit() 在 Firefox 中不起作用
【发布时间】：2014-09-01 08:09:29
【问题描述】：

here、here 和 here 以及其他地方有几个问题/答案，但它们似乎都是 JQuery 特定的，似乎不适用于此（例如，我 NOT 创建一个新的 Form 对象，这是文档中现有的表单。我也不使用 Jquery）。

出于 IE7 兼容性的原因，我有一个表单必须在提交前进行修改。我必须从我的表单中删除所有 BUTTON 标记，然后添加一个隐藏字段，但这都是在现有 HTML 页面上的现有表单中。此代码在 IE 和 Chrome 中正常运行，但在 Firefox 中无法运行（版本 23 和 24 均已测试）。

    buttonClickFunction(formName, buttonObject) {
        var formObject = document.forms[formName];
        var i = 0;

        // Strip out BUTTON objects
        for (i=0;i<formObject.length;i++) {
            if (formObject[i].tagName === 'BUTTON') {
                formObject[i].parentNode.removeChild(formObject[i]);
                i--;
            }
        }

        // Create new field
        var newField = document.createElement('input');
        newField.type = 'hidden';
        newField.id=buttonObject.id;
        newField.name = buttonObject.name;
        if (buttonObject.attributes['value'] != null) {
            newField.value = buttonObject.attributes['value'].value;
        } else {
            newField.value = buttonObject.value;
        }

        // Submit form
        formObject.appendChild(newField);
        document.forms[formName].appendChild(newField);
        document.forms[formName].submit();
    }

除了document.forms[formName].submit()，我还尝试过formObject.submit()——两者都可以在 Chrome 中使用，但在 Firefox 中都失败了。我不知道为什么这不起作用 - 我已经通过 JS 跟踪并观察到 document.forms[formName].submit() 执行 - 没有出现异常，但没有任何东西进入服务器。

谁能找出 Firefox 不提交此表单的原因，以及我该如何解决？

【问题讨论】：

标签： javascript forms dojo

【解决方案1】：

当form.submit() 不能在 Firefox 上运行，但在其他浏览器上运行时，我也有类似的行为。只需确保表单中的所有按钮都包含type="button"。

【讨论】：

是的，其他一切都失败了。 type=submit 甚至都没有用。

【解决方案2】：

对于任何在提交 Firefox 后页面位置更改/重新加载时遇到问题的人，您需要将重定向代码放在 $.post 回调中：

$(".form").submit(function(e){
    e.preventDefault();
    $.post("submit.php", {data: textData}, function(){
        history.go(-1);
    });
    return false;
});

【讨论】：

【解决方案3】：

Firefox 期望，当您提交表单时，您至少有一个可用的提交按钮，这意味着应该有类似的内容：

<button type="submit">Click me</button>

或：

<input type="submit" value="Click me" />

当您在代码中使用第一个时，它将不起作用（因为您在提交表单之前删除了所有按钮）。当您使用第二个选项时，它也可以在 Firefox 中使用。正如你在这个小提琴中看到的：http://jsfiddle.net/q9Dzc/1/

【讨论】：

这就是问题所在——Firefox 显然不会提交没有任何按钮的表单。不知道为什么会这样，或者这是否是“故意”行为。
多年来都是这样，所以如果这不是故意的，我想他们现在应该已经修好了。我知道这一点的唯一原因是因为我曾经遇到过类似的问题（尽管是 2 年多前：p）
非常感谢 - 如果没有你，我无法解决这个问题。
提醒其他关注此问题的人，您还需要确保将元素附加到文档正文，而不仅仅是它具有提交按钮。如果这不起作用，请尝试这些行，感谢 developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/… form.style.display = "none"; document.body.appendChild(form);
正如@carterh062 所说，确保表单在 DOM 中。需要附加动态生成的表单才能提交。