我有两个文件:test.html和forms.html
test.html有一个按钮，通过AJAX请求form .html。
forms.html是一组表单。我在我的环境中动态地生成这些表单，但是仅仅为了演示的目的，我在这个例子中将其设置为静态的。
我将forms.html中的表单放到test.html中的div占位符中。
问题是表单不起作用。提交按钮不起作用。复位按钮不工作。
当我自己打开forms.html时，表单似乎工作得很好。提交按钮可以工作。复位按钮工作
如何使表单在test.html中工作?
test.html:
<html>
<head>
<title>test</title>
<script type="text/javascript">
function displayForms() {
document.getElementById("formPlaceholder").innerHTML = "Retreiving forms... ";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("formPlaceholder").innerHTML = this.responseText;
}
};
xhttp.open("GET", "forms.html", false);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send();
return true;
}
</script>
</head>
<body>
<center>
<button type="submit" onclick="return displayForms();">Display Forms</button>
</center>
<div id="formPlaceholder" align="center"></div>
</body>
</html>这里是forms.html
<table>
<tr>
<form name="someform" method="post" action="someaction.php">
<td><input type="text" name="somefield" /></td>
<td><button type="submit">Submit</button></td>
<td><input type="reset" value="Reset" /></td>
</form>
</tr>
<tr>
<form name="someform" method="post" action="someaction.php">
<td><input type="text" name="somefield" /></td>
<td><button type="submit">Submit</button></td>
<td><input type="reset" value="Reset" /></td>
</form>
</tr>
<tr>
<form name="someform" method="post" action="someaction.php">
<td><input type="text" name="somefield" /></td>
<td><button type="submit">Submit</button></td>
<td><input type="reset" value="Reset" /></td>
</form>
</tr>
</table>原来表不能有窗体作为子表。我从这个非常老的帖子中得到了答案，c/o @Quentin。
所以我使用了HTML5的form属性，也是@Quentin建议的。
我把forms.html编辑成这样:
<form name="someform0" id="someform0" method="post" action="someaction.php">
<form name="someform1" id="someform1" method="post" action="someaction.php">
<form name="someform2" id="someform2" method="post" action="someaction.php">
<table>
<tr>
<td><input type="text" name="somefield" form="someform0"/></td>
<td><button type="submit" form="someform0">Submit</button></td>
<td><input type="reset" value="Reset" form="someform0"/></td>
</tr>
<tr>
<td><input type="text" name="somefield" form="someform1"/></td>
<td><button type="submit" form="someform1">Submit</button></td>
<td><input type="reset" value="Reset" form="someform1"/></td>
</tr>
<tr>
<td><input type="text" name="somefield" form="someform2"/></td>
<td><button type="submit" form="someform2">Submit</button></td>
<td><input type="reset" value="Reset" form="someform2"/></td>
</tr>
</table>