表单字段:添加新的输入>到一个<form>通过Javascript

Form field: Adding new <inputs> to the inside of a <form> via Javascript

本文关键字：一个 Javascript 通过 form 添加 输入 字段 表单      更新时间：2023-09-26

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

我的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>

添加到表单周围的div中，因此字段不会在子表单中。

把表单放在"dynamicInput"div周围…或者插入到表单中。

选项: 

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

选项B: 

<div id="dynamicInput">
  <form method="post" name="QuickOrderMulti" id="QuickOrderMulti">
  ...
  </form>
</div>
<script type="text/javascript">
  ...
  document.getElementById('QuickOrderMulti').appendChild(newdiv);
                           ^^^^^^^^^^^^^^^
  ...
</script>

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

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

尝试:

<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 parent = document.getElementById('myform')
 var element = null;
 try { // IE
 element = document.createElement('<input type="text" name="ProductNumber[]">');
 } 
 catch (e) { // W3C
 element = document.createElement("input");
 element.setAttribute("type", "text");
 element.setAttribute("name", "ProductNumber[]");
  }
 parent.appendChild("Product # " + (counter + 1) + element);
 counter++;
  }
}
 </script>
相关文章：