组合来自两个 html 表单的数据元素无法正常工作答案

【问题标题】：combining data elements from two html forms is not working properly组合来自两个 html 表单的数据元素无法正常工作
【发布时间】：2017-05-19 08:32:42
【问题描述】：

我正在尝试合并来自两个 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 页面中看到以下元素从“创建”表单复制到“auth_form”。

<input name="rep_platform" value="All" type="hidden">
<input name="bug_severity" value="Beeper Call" type="hidden"/>

即使经过一段时间的调试，我也无法弄清楚为什么有些元素被成功复制而其他元素却没有。

【问题讨论】：

标签： javascript jquery html forms dom

【解决方案1】：

.elements 返回一个实时的元素集合。当您从集合中追加一个元素时，它会从集合中删除，因此您在集合中的索引 i 会不同步，因此会跳过所有其他元素。

相反，只需追加集合中的第一个元素，直到集合为空。（只需在遇到提交按钮元素时将其分离）。或者，从最后一个到第一个而不是从第一个到最后一个循环遍历集合。

_{（querySelectorAll() 之所以有效，是因为它返回的是静态集合，而不是实时集合。）}

【讨论】：

好的，那么如何从集合中追加第一个元素？我认为这就是我通过循环所做的事情，以先到者为准，我将其附加到表单中。
现在我明白了附加第一个元素的意思。在循环中，我只使用索引 0，它可以工作，因为集合已经缩小了 1。

【解决方案2】：

尝试将您的第二个表单从 ...

var issuedata = window.opener.document.getElementById('Create').elements;

到

var issuedata = window.opener.document.querySelectorAll('input[name]');

...并将所有innerHTML 替换为outerHTML

【讨论】：

不从创建表单中获取任何元素
很高兴听到这个消息:)