0

ボタンを介してフォームに新しいフィールドを追加しようとしています。ただし、フォームの外側に追加します。これを達成するために何を編集するかについてのアイデアはありますか？ありがとう。

私の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>
4

3 に答える 3

0

試す：

<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>
于 2013-03-22T14:17:39.340 に答える
0

フォームを囲むDIVに追加しているため、フィールドは子フォーム内にはありません。

「dynamicInput」divの周りにフォームを配置するか、代わりにフォーム内に挿入します。

オプション A:

<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>
于 2013-03-22T13:50:53.483 に答える
0

フォームではなく、div に入力を追加しています。フォームに id を与え、それに入力フィールドを追加するだけです。

document.getElementById("formId").innerHTML = "Product # " + (counter + 1) + " <br><input type='text'     name='ProductNumber[]'>";
于 2013-03-22T13:53:18.680 に答える