代码之家  ›  专栏  ›  技术社区  ›  Dipak

为什么不能提交未呈现的表单?

  •  4
  • Dipak  · 技术社区  · 7 年前

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

    我有一个特定的场景,我想向服务器提交一个动态表单。到目前为止,我通过添加 类型 body 使用创建后 jQuery .效果很好,但我想知道 为什么我不能提交 in memory 类型 不渲染到 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();
    

    当我在控制台中运行上述代码时,会收到以下警告消息:

    表单提交已取消,因为表单未连接

    2 回复  |  直到 7 年前
        1
  •  3
  •   Hikarunomemory Bhavana    7 年前

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

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

    进一步阅读:

    Form submission algorithm

    DocumentFragment

        2
  •  0
  •   Daouda    7 年前

    表单在提交之前应该在DOM上,因为在加载页面后,每个元素都附加了一个事件,所以DOM可以识别它,jquery或javascript可以操纵它。但是您正在做的事情(第二个)在DOM中甚至不存在,因此事件submit()对它不可用。