Firefox 不会提交由 JavaScript 创建的表单答案

【问题标题】：Firefox won't submit a form created by JavaScriptFirefox 不会提交由 JavaScript 创建的表单
【发布时间】：2011-03-06 02:24:36
【问题描述】：

当事件发生时，我需要创建一个包含一些输入的表单。我的代码如下。

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

【问题讨论】：

在黑暗中射击：将表单设置为display:none 并将其添加到 DOM 中的现有元素中，然后提交。我想 FF 要求它已经在 DOM 中了。
@Balus：或者更好，提交后删除？
@JCOC：这与这个特定问题无关 :) 页面无论如何都会被刷新，因为 OP 不使用 ajaxical 的东西。
是的，那会代替display:none
@Balus - document.body.appendChild(form); 工作。谢谢！如果您想将其作为答案，我会接受。

标签： javascript forms firefox3.6

【解决方案1】：

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

【讨论】：

这不是也行吗？ document.body.appendChild(form); 在这种情况下，我真的不太清楚“DOM”和“页面”之间的区别。有类似的问题，它在 Chrome 中运行良好，在 IE 和 FireFox 中失败。
document 是 DOM 树的根节点。
抱歉，上次评论中有错别字。想明确一点，虽然document.createElement 没有将它添加到 DOM（就像我假设的那样），但它仍然可以使用appendChild 以编程方式完成。也就是说，在实例化或类似的情况下，它不需要表单在 HTML 标记中。
标记（检索的 HTML 输出）！= DOM 树（客户端模型）。

【解决方案2】：

试试这个...

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

var quantityInput = document.createElement('input');
quantityInput.name = '数量';
数量输入.值 = 1;

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

var submitInput = document.createElement('input');
submitInput.type = '提交';
submitInput.value = '任何东西';

var form = document.createElement('form');
form.action = '@{Checkout.setItemsQuantityHandler}';
form.method = 'POST';
form.elements[0] = idsInput;
form.elements[1] = 数量输入；
form.elements[2] = authTokenInput;
form.elements[3] = submitInput;
document.body.appendChild(form);
form.submit();

【讨论】：