火狐浏览器无法提交由JavaScript创建的表单

Question

当事件发生时，我需要创建一个带有几个输入的表单。我的代码如下：

在 Chrome 中，提交正常 - 弹出框显示且页面更改。

但是在 Firefox 中无法工作 - 弹出框显示但页面保持不变。我该如何让 Firefox 提交表单？

var idsInput = document.createElement('input');
idsInput.name = 'itemIds';
idsInput.value = ids;

var quantityInput = document.createElement('input');;
quantityInput.name = 'quantity';
quantityInput.value = 1;

var authTokenInput = document.createElement('input');
authTokenInput.name = 'authenticityToken';
authTokenInput.value = '${session.getAuthenticityToken()}';

var submitInput = document.createElement('input');
submitInput.type = 'submit';
submitInput.value = 'anything';

var form = document.createElement('form');;
form.action = '@{Checkout.setItemsQuantityHandler}';
form.method = 'POST';
form.elements[0] = idsInput;
form.elements[1] = quantityInput;
form.elements[2] = authTokenInput;
form.elements[3] = submitInput;
form.submit();

alert('after submit()'); // for debugging only

- Amy B

---

盲目尝试：将表单设置为 display:none 并将其添加到 DOM 中的现有元素中，然后提交它。我想象 Firefox 要求它已经在 DOM 中了。 - BalusC

@Balus：或者更好的做法是，在提交后将其删除？ - JCOC611

@JCOC：这对于这个具体问题来说不是一个问题 :) 页面将被刷新，因为OP没有使用ajax相关的东西。 - BalusC

是的，那个可以代替 display:none。 - JCOC611

@Balus - document.body.appendChild(form); 可以使用。谢谢！如果你想把它作为答案，我会接受的。 - Amy B

@JCOC：我想在JS中这样做的原因只是为了隐藏表单，以防止最终用户看到:) 在响应返回之前可能会有一些延迟。因此使用display:none。 - BalusC

Answer 1

FF要求表单在DOM中已经存在。将表单的display:none，并将其添加到DOM中一个现有的元素中，然后提交它。

- BalusC

---

这个也行吗？document.body.appendChild(form);在这种情况下，我对“DOM”和“页面”的区别并不太清楚。我遇到了类似的问题，在Chrome中运行良好，但在IE和FireFox中失败了。 - ficuscr

document 是 DOM 树的根节点。 - BalusC

对于上一条评论中的错别字表示抱歉。我想澄清一下，虽然 document.createElement 不像我之前所认为的那样将元素添加到 DOM 中，但我们仍然可以使用 appendChild 来以编程方式添加它。也就是说，在实例化时它不需要在 HTML 标记中或者任何其他类似的地方出现。 - ficuscr

标记（检索到的HTML输出）！= DOM树（客户端模型）。 - BalusC

Answer 2

尝试这个...

var idsInput = document.createElement('input');
idsInput.name = 'itemIds';
idsInput.value = ids;

var quantityInput = document.createElement('input');
quantityInput.name = 'quantity';
quantityInput.value = 1;

var authTokenInput = document.createElement('input');
authTokenInput.name = 'authenticityToken';
authTokenInput.value = '${session.getAuthenticityToken()}';

var submitInput = document.createElement('input');
submitInput.type = 'submit';
submitInput.value = 'anything';

创建一个表单并将其附加到页面上：
var form = document.createElement('form');
form.action = '@{Checkout.setItemsQuantityHandler}';
form.method = 'POST';
form.elements[0] = idsInput;
form.elements[1] = quantityInput;
form.elements[2] = authTokenInput;
form.elements[3] = submitInput;
document.body.appendChild(form);
提交表单：

- rjvilla