JavaScript this.form 返回意外的形式

Question

我有一些封闭的表单和两个嵌套的表单。两个嵌套表单在按钮单击时使用 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< 中保留整个表单数据/strong> 重定向(一个用于上传，一个用于显示上传的文件)我决定采用 AJAX。

仅供引用:console.log(document.getElementById('deleteform')) 返回未定义

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。