0

所以我得到了一些封闭形式和两个嵌套形式。两个嵌套表单在 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>

When checking a checkbox and "submitting" the form, console logs outer form, but when chosing a file and "sumbitting" that, the correct form gets logged.

有人可以解释为什么和/或如何解决这个问题吗？

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

表单是用 asp classic 处理和创建的（哦，痛苦，但是…… ），因为我并不热衷于在两个重定向中保留整个表单数据（一个用于上传，一个用于显示上传的文件) 我决定去 AJAX。

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

4

3 回答 3

3

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

然后它会看到</form>并关闭<form id="form1">. 之后，它会看到<form id="addfileform">标签并启动一个新表单，该表单被 next 关闭</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。

于 2013-03-27T08:47:49.913 回答
0

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

请通过此 W3 规范

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

于 2013-03-27T08:47:19.847 回答
0

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

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

于 2013-03-27T09:18:56.370 回答