表单字段：添加新的<；投入>；到a<；表格>；通过Javascript

我正试图通过一个按钮将新字段添加到表单中。但是，它会将其添加到表单的外部。有没有关于编辑什么来完成这项任务的想法？谢谢

我的HTML：

<div id="page">

<h1>Quick Order</h1>
<div id="dynamicInput">
<form method="post" name="QuickOrderMulti">

<input type="hidden" name="formName" value="dmiformQuickOrderMulti">

  <p>Product #  <input type='Text' name="ProductNumber" title="Enter Product #"></p>
  <p>Product #  <input type='Text' name="ProductNumber" title="Enter Product #"></p>


<input type="submit" value="Add"><input type="button" value="Add another text input"     onClick="addInput('dynamicInput');">

</form>
</div>
</div> <!-- page -->

快速订购
产品#

产品#

我的JavaScript：

<script type="text/javascript">
var counter = 0;
var limit = 3;
function addInput(dynamicInput){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Product # " + (counter + 1) + " <br><input type='text'     name='ProductNumber[]'>";
          document.getElementById(dynamicInput).appendChild(newdiv);
          counter++;
     }
}
</script>

var计数器=0；
var限值=3；
函数addInput（dynamicInput）{
如果（计数器==限制）{
警报（“您已达到添加“+计数器+”输入的极限”）；
}
否则{
var newdiv=document.createElement（'div'）；
newdiv.innerHTML=“产品”+（计数器+1）+“
”；
document.getElementById（dynamicInput）.appendChild（newdiv）；
计数器++；
}
}

您将附加到表单周围的DIV，因此字段不会在子表单中

或者把表格放在你的“dynamicInput”分区周围。。。或者在表单中插入

选项A:

<form method="post" name="QuickOrderMulti">
  <div id="dynamicInput">
  ...
  </div>
</form>

<div id="dynamicInput">
  <form method="post" name="QuickOrderMulti" id="QuickOrderMulti">
  ...
  </form>
</div>

<script type="text/javascript">
  ...
  document.getElementById('QuickOrderMulti').appendChild(newdiv);
                           ^^^^^^^^^^^^^^^
  ...
</script>

...

选项B:

<form method="post" name="QuickOrderMulti">
  <div id="dynamicInput">
  ...
  </div>
</form>

<div id="dynamicInput">
  <form method="post" name="QuickOrderMulti" id="QuickOrderMulti">
  ...
  </form>
</div>

<script type="text/javascript">
  ...
  document.getElementById('QuickOrderMulti').appendChild(newdiv);
                           ^^^^^^^^^^^^^^^
  ...
</script>

...
...
document.getElementById（'QuickOrderMulti'）.appendChild（newdiv）；
^^^^^^^^^^^^^^^
...

您将输入添加到div，而不是表单。只需给表单一个id，并将输入字段添加到该id中

document.getElementById("formId").innerHTML = "Product # " + (counter + 1) + " <br><input type='text'     name='ProductNumber[]'>";

document.getElementById（“formId”）.innerHTML=“Product#”+（计数器+1）+”
；

试试：

var计数器=0；
var限值=3；
函数addInput（dynamicInput）{
如果（计数器==限制）{
警报（“您已达到添加“+计数器+”输入的极限”）；
}
否则{
var parent=document.getElementById（'myform'）
var元素=null；
试试看
元素=document.createElement（“”）；
} 
捕获（e）{//W3C
元素=document.createElement（“输入”）；
setAttribute（“类型”、“文本”）；
setAttribute（“名称”、“产品编号[]”）；
}
parent.appendChild（“产品”+（计数器+1）+元素）；
计数器++；
}
}

想给我们一个更新或者选择一个正确的答案吗？