在javascript中使用单个提交按钮提交多个表单答案

【问题标题】：submit multiple forms with single submit button in javascript在javascript中使用单个提交按钮提交多个表单
【发布时间】：2012-03-03 14:06:30
【问题描述】：

我有 1 个包含 2 个表单和 1 个提交按钮的 php 页面。我想用这个单个按钮提交两个表单。我的代码运行良好，但有一个问题，每个表单中只有 1 个字段成功提交。下面是我的html和javascript代码，请告诉我哪里出错了

2个html表单

<form name="form">
      <input type="text" name="a" value="a">
      <input type="text" name="b" value="b">
</form>
<form name="form">
      <input type="text" name="c" value="c">
      <input type="text" name="d" value="d">
</form>

<input type="submit" name="Submit" id="button" value="Submit" onClick="submitAllDocumentForms()">

Javascript 代码

<script language="javascript" type="text/javascript">
/* Collect all forms in document to one and post it */
function submitAllDocumentForms() {
var arrDocForms = document.getElementsByTagName('form');
var formCollector = document.createElement("form");
with(formCollector)
{
method = "post";
action = "test.php";
name = "formCollector";
id = "formCollector";
}
for(var ix=0;ix<arrDocForms.length;ix++) {
appendFormVals2Form(arrDocForms[ix], formCollector);
}
document.body.appendChild(formCollector);
formCollector.submit();

}
/* Function: add all elements from ``frmCollectFrom´´ and append them to ``frmCollector´´ before returning ``frmCollector´´*/
function appendFormVals2Form(frmCollectFrom, frmCollector) {
var frm = frmCollectFrom.elements;
for(var ix = 0 ; ix < frm.length ; ix++)
frmCollector.appendChild(frm[ix]);
return frmCollector;
}
</script>

我的 php 代码回显提交的值

<?php
echo $_POST['a'];
echo $_POST['b'];
echo $_POST['c'];
echo $_POST['d'];
?>

【问题讨论】：

标签： php javascript html

【解决方案1】：

问题在于appendChild() 将元素从表单中取出，修改了elements 数组及其长度。为避免这种情况，您可以例如将元素的数量存储在变量中并从最后一个元素开始处理元素数组：

var frm = frmCollectFrom.elements; 
var nElems = frm.length;
for(var ix = nElems - 1; ix >= 0 ; ix--)
  frmCollector.appendChild(frm[ix]);

【讨论】：