Question

所以我得到了一些封闭的表格和两个嵌套的表格。两个嵌套的表单在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经典（哦痛苦，但很好...... ）处理和创建的，因为我并不真的热衷于保持整个表单数据 2 < / strong>重定向（一个用于上传，一个用于显示上传的文件）我决定使用AJAX。

仅供参考：console.log（document.getElementById（'deleteform'））返回 undefined

Answer 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。

Answer 2

如果指向不同的操作，则可以在单个HTML中包含多个表单。禁止嵌套表格标签

请仔细阅读W3规范

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

Answer 3

一般来说，您不应使用嵌套表单。如果出于任何原因，您可能需要使用嵌套表单，则应考虑更改Web应用程序的体系结构。

例如，在上面的示例中，您可以使用fieldsets替换嵌套表单，并通过单击事件直接控制其各自的提交按钮，获取您的ajax调用所需的信息。

javascript this.form返回意外的表单

3 个答案: