Question

这是一个场景，我在页面上有3个html表单，它们看起来像

form1（）form2（form3（））

用于测试3种形式的虚拟程序 __

<script language="javascript" type="text/javascript">
function submitthisform(no){
    document.forms[no].submit;
}
</script>

<form action="http://cnn.com" name="1">
 <input type=submit value="cnn" onclick="submitthisform('1')" name='submit1'>
</form>

<form  action="http://google.com" name="2">

    <form  action="http://yahoo.com" name="3">
    <input type=submit value="yahoo" onclick="submitthisform('3')" name="submit3">
    </form>

<input type=submit value="google"  onclick="submitthisform('2')" name="submit2">
</form>

现在当我执行submit3时，会调用onclick函数，我尝试提交form3，否则它总是提交表单2

在onclick中，我发送了表单名称。但是form3似乎无法访问。原因是，如果我遍历页面上的所有表格，它不会返回表格3但只有1和1表格。 2

var forms = document.getElementsByTagName("form");
for (var i=0; i<forms.length; i++){
        alert('form'+i+' = '+forms[i].name);// displays name of form1&2 
}

它还会在点击提交2时出现javascript错误。

尝试这个小代码，你会明白的。告诉我，如果我可以提交表格3 !!!!

Answer 1

根据XHTML specs

表单不得包含其他表单元素。

所以请不要这样做，因为你不能保证跨浏览器的兼容性（当前或未来）

Answer 2

我的解决方案：通过将所有子项移动到新div中来停用父表单。实际上，我将表单元素的类型更改为div。

这里我的代码片段来自Vue.js方法：

app component

嵌套表单标记通过计算属性动态粘贴，以避免冲突。（可选）如果需要还原外部表单，则也可以复制表单属性。为了我的目的，这不是必要的。

也许是黑客，但效果很好！

嵌套的html FORM无法访问 - 多个表单问题

2 个答案: