javascript this.form 返回意外的表单答案

【问题标题】：javascript this.form returns unexpected formjavascript this.form 返回意外的表单
【发布时间】：2013-03-27 08:39:12
【问题描述】：

所以我得到了一些封闭形式和两个嵌套形式。两个嵌套表单在 buttonclick 上使用 ajax 进行评估，外部表单有一个提交按钮。

简化标记：

<form id="form1" action="default.asp">
    //some fields inside a list with unnecessary text
    <input type="text" name="shortdesc"/>
    <form id="deleteform" action="delete.asp">
       //dynamically generated checkboxes
       <input type="checkbox" name="deleter" value="somedocument.txt">somedocument.txt<br>
       <input type="checkbox" name="deleter" value="some_otherdocument.doc">some_otherdocument.doc<br>
       <input type="button" onclick="console.log(this.form); ajaxcall('delete.asp', this.form);" />
    </form>
    <form id="addfileform" action="upload.asp">
        <input type="file" name="file"/>
        <input type="button" onclick="console.log(this.form); ajaxcall('upload.asp', this.form);" />
    </form>
    <input type="button" value="send" onclick="dataValidation(form1),"/>
</form>

选中复选框并“提交”表单时，控制台会记录外部表单，但在选择文件并“提交”该文件时，会记录正确的表单。

有人能解释一下为什么和/或如何解决这个问题吗？

澄清一下：这应该是某个网站（不是 HTML5），您可以在其中提交一些文本字段以要求 CEO 进行一些更改。我现在应该实现一个文件附加。

表单是用 asp classic 处理和创建的（很痛苦，但是……），因为我并不热衷于在整个 two 重定向（一个用于上传，一个用于显示上传的文件）我决定使用 AJAX。

仅供参考：console.log(document.getElementById('deleteform')) 返回 undefined

【问题讨论】：

在一个表单中包含两个表单似乎是个好主意。这可能就是问题所在，你为什么要做这样的事情（哦，痛苦）！
根据html5 spec，您不能嵌套表单。

标签： javascript forms javascript-events

【解决方案1】：

HTML 表单不能嵌套。这里发生的是浏览器看到您的第一个 <form id="form1"> 标记，但它忽略嵌套的 <form id="deleteform"> 标记。

然后它会看到</form> 并关闭<form id="form1">。之后，它会看到<form id="addfileform"> 标记并启动一个新表单，该表单被下一个</form> 关闭。

然后是最后一个<input type="submit" value="send"> 按钮，它按预期解析，但根本不在任何表单内。

最后有一个额外的</form> 在它忽略的末尾。

换句话说，就像你写的一样：

<form id="form1" action="default.asp">
    <input type="checkbox" name="deleter" value="somedocument.txt">somedocument.txt<br>
    <input type="checkbox" name="deleter" value="some_otherdocument.doc">some_otherdocument.doc<br>
    <input type="button" onclick="console.log(this.form); ajaxcall('delete.asp', this.form);" />
 </form>
<form id="addfileform" action="upload.asp">
    <input type="file" name="file"/>
    <input type="button" onclick="console.log(this.form); ajaxcall('upload.asp', this.form);" />
</form>
<input type="button" value="send" onclick="dataValidation(form1),"/>

查看何时发生此类情况的一种简单方法是在浏览器中使用 DOM 检查器。这显示了浏览器从您的 HTML 代码生成的 DOM - 这有时会让您感到惊讶！您还应该像其他人提到的那样验证您的 HTML 代码。

当您尝试 console.log(document.getElementById('deleteform')) 时，会记录 undefined，因为如上所述，您的 deleteform 从未进入 DOM。

【讨论】：

好吧，但真正的乐趣来了：我现在没有更改标记（正如你所说的“第二个”表单被忽略。但是在嵌套表单（addfileform）之后我有提交- 表单 1 的按钮。这很有效。你能告诉我为什么吗？
当您说“提交”按钮时，您的真正意思是一个普通按钮，就像您的代码中显示的其他按钮一样，对吗？换句话说，它没有 type="submit"，只有 type="button"。该按钮之所以有效，是因为在表单之外有一个按钮很好，并且您的按钮行为是从 onclick 属性发生的，而不是从它作为提交按钮发生的。同样，加载您的页面，然后在 DOM 检查器中查看它，您将看到发生了什么。
在 DOM 检查器中查看您的页面。此外，由于您的 HTML 代码无效，不同的浏览器可能会以不同的方式解析它。我在 Chrome 中查看它，最后的提交按钮在任何表单之外，当我点击它时什么也不做。
啊，我看到您刚刚在提交按钮中添加了一个 onclick 属性。那就是当您单击按钮时按钮起作用的原因。您不依赖它充当提交按钮 - 而且它不会充当提交按钮，因为它根本不在任何表单内 - 相反，您已经通过 JavaScript 明确地赋予它行为。
我把它的最大部分给了我前缀，这两种形式只是一个新的“特色”功能（文件附加）的实现，有趣的是，我需要移动右边500个标志看按钮类型(gj开发者(doh))

【解决方案2】：

您可以在单个 HTML 中包含多个表单，前提是它们指向不同的操作。禁止嵌套表单标签

请仔细阅读这个 W3 规范

http://www.w3.org/TR/xhtml1/#prohibitions

【讨论】：

【解决方案3】：

一般来说，您不应该使用嵌套表单。如果出于任何原因，您需要使用嵌套表单，或许您应该考虑更改 Web 应用程序的架构。

例如，在上面的示例中，您可以将嵌套表单替换为字段集，并通过单击事件直接控制它们各自的提交按钮，从而仅获取 ajax 调用所需的信息。

【讨论】：