php - 使用 JavaScript 中的单个提交按钮提交多个表单

Question

我有 1 个 php 页面，其中包含 2 个表单和 1 个提交按钮。我想使用这个按钮提交两个表单。我的代码运行良好，但存在 1 个问题，即每个表单中只有 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'];
?>

Answer 1

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

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