Javascript 在一个新页面上发布多个重复的表单，其中包含不同的信息_Javascript_Php_Jquery_Html_Forms

Javascript 在一个新页面上发布多个重复的表单，其中包含不同的信息

javascript php jquery html forms

Javascript 在一个新页面上发布多个重复的表单，其中包含不同的信息,javascript,php,jquery,html,forms,Javascript,Php,Jquery,Html,Forms,我需要创建一个系统来打印数据库中项目的信息。现在我有了一个带有几个输入字段（type=text和radio）的html表单，所以我可以收集一个项目的所有信息为了加快这个过程，我引入了一个javascript，通过单击将整个空表单复制n次，这样就可以一次打印多个项目信息。我的脚本如下所示： <body> <button id="button" onclick="duplicate()">add form</button><!--this button

我需要创建一个系统来打印数据库中项目的信息。现在我有了一个带有几个输入字段（type=text和radio）的html表单，所以我可以收集一个项目的所有信息

为了加快这个过程，我引入了一个javascript，通过单击将整个空表单复制n次，这样就可以一次打印多个项目信息。我的脚本如下所示：

<body>
  <button id="button" onclick="duplicate()">add form</button><!--this button duplicates the empty form-->

  <form action="action.php" method="post" name="formulario">

  <div id="duplicater">
<p>Código:<input type="text" name="codigo" /></p>
    <p>Nombre del proyecto:<input type="text" name="proyecto" /></p>

  <p>
    <span>
      <input type="radio" name="grupo1" value="SD" />SD
      <input type="radio" name="grupo1" value="HD" />HD
    </span> 
    <span>
      <input type="radio" name="grupo2" value="4:3"/>4:3 
      <input type="radio" name="grupo2" value="16:9"/>16:9
    </span>
  </p>
  <p>Fecha:<input type="text" name="fecha" /></p>
  <p>Lugar:<input type="text" name="lugar" /></p>
  <p>Dueño:<input type="text" name="dueno" /></p>
</div>
<p><input type="submit" name="submit" value="enviar" /></p>
</form>

<script>
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('duplicater');
function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicator" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
}
</script>
</body>


添加表单
科迪戈：
项目名称：

SD
高清
4:3 
16:9

费查：
卢格：
到期日：

document.getElementById（'button'）。onclick=duplicate；
var i=0；
var original=document.getElementById（'duplicater'）；
函数复制（）{
var clone=original.cloneNode（true）；/“deep”clone
clone.id=“replicator”+++i；//只能有一个id为的元素
original.parentNode.appendChild（克隆）；
}

目前，项目的这一部分工作正常，但action.php文件有一个问题，该文件处理将所有表单中的信息发送到新页面打印的功能

php使用每个输入的name属性收集表单信息。由于每个表单都只是原始表单的一个副本，每个新表单都有相同的name属性，因此当我单击send按钮时，php只会回显上一个表单的信息

<div><span>Código: </span><?php echo htmlspecialchars($_POST['codigo']); ?></div>
<div><span>Proyecto: </span><?php echo htmlspecialchars($_POST['proyecto']); ?></div> 
<div><span>Calidad: </span><?php echo htmlspecialchars($_POST['grupo1']); ?></div>
<div><span>Formato: </span><?php echo htmlspecialchars($_POST['grupo2']); ?></div>
<div><span>Fecha: </span><?php echo htmlspecialchars($_POST['fecha']); ?></div>
<div><span>Lugar: </span><?php echo htmlspecialchars($_POST['lugar']); ?></div>
<div><span>Dueño: </span><?php echo htmlspecialchars($_POST['dueno']); ?></div>

Código:
项目：
卡里达：
格式：
费查：
卢格：
到期日：

问题:

我需要更新（重命名）每个重复表单中输入标记的name属性，我该怎么做

是否可以将action.php文件中的echo函数引用到一个div，该div具有一个分配给post的id，以便一次发布整个信息？否则，如何将所有复制表单的信息一次发送（发布）到新页面

这必须是一个客户端进程，因此它后面没有其他内容，php只是用于将信息回显到新页面。所以，如果有可以用javascript或jQuery实现的解决方案，也可以

我留下了一个到演示的链接

多亏了所有的预先准备。

按照POST变量发送到脚本的方式，它们在数组中被命名为键、值对。具有相同名称的任何输入都将被覆盖

我建议在每一个额外的输入被创建时都添加一个数字或在其前面加上一个数字，这样就不用称为“name”的新输入，而是称为“name.1”或“1.name”。您的第一个输入将是“name.0”，其余的将随着它们的添加而递增。处理信息时，可以使用substr迭代POST数组键，并在将信息保存到数据库之前根据需要重新塑造信息