无法在 Firefox 上从 Javascript 提交表单

Posted 2023-02-22

【中文标题】无法在 Firefox 上从 Javascript 提交表单

【英文标题】：Cannot submit form from Javascript on Firefox

【发布时间】：2015-09-24 17:50:20

【问题描述】：

我正在创建一个表单以在 javascript 函数中提交。我将该函数绑定到一个选择元素的 onchange 事件。事件在 chrome 和 firefox 中运行良好，我对其进行了测试，它调用了该函数。但问题是； chrome 提交表单时，firefox 没有。能否请你帮忙？ 谢谢。

Javascript 函数：

function getStatementDetails()

    var stmtSelect = document.getElementById("statementSelect");
    var selectedId = stmtSelect.options[stmtSelect.selectedIndex].value;

    var stmtForm = document.createElement("form");
    stmtForm.setAttribute('method', "post");
    stmtForm.setAttribute('action', "mymiles-mystatement");

    var stmtId = document.createElement("input");
    stmtId.setAttribute('type', "hidden");
    stmtId.setAttribute('name', "statementID");
    stmtId.setAttribute('id', "statementID");
    stmtId.setAttribute('value', selectedId);

    stmtForm.appendChild(stmtId);
    stmtForm.submit();
;

选择输入：

<select id="statementSelect" name="statementSelect" class="select-miles select-miles-medium spacing-right-10" onchange="getStatementDetails()">

编辑： 我已阅读建议的帖子并尝试过。还是行不通。 函数最新状态：

function getStatementDetails()

    var stmtSelect = document.getElementById("statementSelect");
    var selectedId = stmtSelect.options[stmtSelect.selectedIndex].value;

    var stmtForm = document.createElement("form");
    stmtForm.setAttribute('method', "post");
    stmtForm.setAttribute('action', "mymiles-mystatement");

    var stmtId = document.createElement("input");
    stmtId.setAttribute('type', "hidden");
    stmtId.setAttribute('name', "statementID");
    stmtId.setAttribute('id', "statementID");
    stmtId.setAttribute('value', selectedId);

    var stmtSbmt = document.createElement("input");
    stmtSbmt.setAttribute('type', "submit");
    stmtSbmt.setAttribute('name', "tryMe");
    stmtSbmt.setAttribute('id', "tryMe");
    stmtSbmt.setAttribute('value', "try submit");

    stmtForm.appendChild(stmtId);
    stmtForm.appendChild(stmtSbmt);
    stmtForm.submit();
;

【问题讨论】：

这似乎是一个正确的代码，很长，这是必要的，但它必须工作。您可以告诉我们控制台是否抛出错误？在 Firefox 中，ALT + F2 打开超级开发者栏，并在工具按钮中，您可以在其中找到检查器、控制台等。

也许 Firefox 不会在同一个 JavaScript 方法中刷新 DOM 更改。您可以尝试使用 Timeout 等待或使用 jQuery

使用 jQuery 是 2 行代码。但他是用纯 JavaScript 写的，我不知道为什么，但我认为他有他的理由

@MarcosPérezGude - 它可以为您解决这些问题。如果 jQuery 是答案，那么你问错了问题

@MarcosPérezGude - 但是 Alt+F2 什么也没做 - 现在做你真尴尬

【参考方案1】：

如果您想提交表单，您需要一个提交按钮，否则您需要使用form data api。

<input type="submit" value="click me baby" />

您可以更轻松地在 html 中编写表单，而不是使用 javascript 动态创建它（除非有您没有考虑到的原因）

你的 html 中有 select 元素，为什么不是整个表单？

还值得一提的是，您应该不将您的提交按钮命名为 submit，因为如果您在任何时候需要 preventDefault()，这可能会导致问题。

【参考方案2】：

cmets 部分已满，用户可能看不到正确答案。 @spuyet 说这就是这里的解决方案：

Javascript form.submit() not working in Firefox

似乎 Firefox 不会发送没有任何按钮的表单。如果您在代码中包含提交按钮，则必须有效。

  var button = document.createElement("input");
  button.setAttribute('type', "submit");
  stmtForm.appendChild(button);

我认为这可以解决您的问题。

如果你解决了，请告诉我们。

【讨论】：

我完全复制了您的建议，但仍然不起作用。在 Chrome 中它运行良好。我想我需要在这里为我的问题找到另一种解决方案或方法。感谢您的关注。

我认为您需要将表单附加到正文中，如果您愿意，可以将其隐藏，然后提交。 document.getElementsByTagName("body")[0].appendChild(stmtForm);

这行得通。我将表单添加到正文中，现在提交正在工作。非常感谢，没有您的帮助无法解决这个问题。

很高兴为您提供帮助。感谢@spuyet 告诉提交按钮