javascript - 为什么不能提交未呈现的表单？

Question

有没有办法提交未渲染的 form ？

我有一个特定的场景，我想向服务器提交一个动态表单。到目前为止，我已经通过添加 form 实现了这一点。到 body使用 jQuery 创建后.它工作完美，但我想知道为什么我无法提交 in memory form不渲染到 DOM .

以下是我试过的代码片段:

var action_url = "/post-url";
$(`
  <form action=${action_url} method="POST">
    <input type="text" value="name1" name="name1"/>
    <input type="text" value="name2" name="name2"/>
    <input type="text" value="name3" name="name3"/>
  </form>
`).appendTo('body').submit();

那么，为什么我不能像下面那样做:

var action_url = "/post-url";
$(`
  <form action=${action_url} method="POST">
    <input type="text" value="name1" name="name1"/>
    <input type="text" value="name2" name="name2"/>
    <input type="text" value="name3" name="name3"/>
  </form>
`).submit();

当我运行上面的代码时，在控制台中收到以下警告消息:

Form submission canceled because the form is not connected

Answer 1

当我们试图将元素插入到文档中时，它会在附加到文档之前创建一些由文档片段缓存的DOM节点。文档片段缓存的节点可以注册事件处理程序，也可以被触发，但是submit()的算法会有点不同。

文档片段中的 DOM 节点不是事件文档树结构的一部分，并且根据 HTML standard documentation , 如果表单未连接(关联、创建或任何其他类似术语)到浏览上下文(文档)，则提交过程将被取消。

进一步阅读:

Form submission algorithm

DocumentFragment