JavaScript.表单返回意外的表单

JavaScript this.form returns unexpected form

本文关键字：表单 意外 返回 JavaScript      更新时间：2023-09-26

我得到了一些封闭表单和两个嵌套表单。两个嵌套表单在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经典(哦，痛苦，但好吧…)处理和创建的，因为我不是真的热衷于在两个重定向中保持整个表单数据(一个用于上传，一个用于显示上传的文件)，我决定使用AJAX。

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

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。

在一个HTML中可以有多个表单，只要它们指向不同的操作。禁止表单标签嵌套

请仔细阅读此W3规范

http://www.w3.org/TR/xhtml1/禁令

一般来说，不应该使用嵌套表单。如果，出于某种原因，你需要使用嵌套表单，也许，你应该考虑改变你的web应用程序的架构。

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

相关文章：