我正在尝试组合来自两个 HTML 表单的数据，然后将其作为单个表单发布，该表单工作正常，只是某些元素没有从一个表单复制到另一个表单。我定义了以下 javascript 函数来组合表单元素:
var form = document.forms['auth_form'];
var issuedata = window.opener.document.getElementById('Create').elements;
for (var i = 0; i < issuedata.length; i++) {
var data = issuedata[i];
alert(data.innerHTML);
if(data.type !== "submit")
form.appendChild(data);
}
实际文件
这是第一种形式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var childWindow = null;
function child_open() {
childWindow = window.open('new.html', "_blank",
"resizable=no,width=600, height=280,top=200,left=200");
}
function parent_disable() {
if (childWindow && !childWindow.closed)
childWindow.focus();
}
</script>
</head>
<body onclick="parent_disable();">
<input type="button" value="Create Jira Ticket" onclick="child_open()" />
<form name="auth_form" id="Create" method="post">
<input name="bug_status" value="NEW" type="hidden">
<input name="rep_platform" value="All" type="hidden">
<input name="component" value="AFAS" type="hidden">
<input name="bug_severity" value="Beeper Call" type="hidden"/>
<input type="hidden" name="comment" value="hello hi"><br>
</form>
</body>
</html>
这是第二种形式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var count = 0;
function submit_and_close() {
var form = document.forms['auth_form'];
var issuedata = window.opener.document.getElementById('Create').elements;
for (var i = 0; i < issuedata.length; i++) {
var data = issuedata[i];
alert(data.innerHTML);
if(data.type !== "submit")
form.appendChild(data);
}
alert(form.innerHTML);
form.submit();
// close the window after form submission is complete.
var docLoaded = setInterval(function() {
if (document.readyState !== "complete") {
return;
}
clearInterval(docLoaded);
//window.close();
}, 30);
}
</script>
</head>
<body>
<header>
<div id="dialog" title="JIRA Dialog">
<h1>JIRA Credentials</h1>
</div>
</header>
<div>
<form name="auth_form" id="auth_form" method="post">
<label> User Name: </label> <input type="text" name="username"><br>
<label> Password: </label> <input type="password" name="password"><br>
<input type="button" value="Log In" onclick="submit_and_close()">
</form>
</div>
</body>
</html>例如，我无法看到以下元素从第二个 html 页面中的“Create”表单复制到“auth_form”。
<input name="rep_platform" value="All" type="hidden">
<input name="bug_severity" value="Beeper Call" type="hidden"/>
即使花了一些时间调试后，我也无法弄清楚为什么某些元素被成功复制，而另一些则没有。
最佳答案
.elements 返回元素的实时集合。当您从集合中追加一个元素时，它会从集合中删除，因此集合中的索引i会不同步，因此会跳过所有其他元素。
相反，只需附加集合中的第一个元素，直到集合为空。 (遇到提交按钮元素时只需将其分离即可)。或者，从最后一个到第一个而不是从第一个到最后一个循环遍历集合。
(querySelectorAll() 之所以有效，是因为它返回一个静态集合，而不是实时集合。)
关于javascript - 合并两个 html 表单中的数据元素无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41474187/