Question

我正在使用javascript函数来填充从其他div提交表单后自动生成的html元素。这是html：

    <html >

     <body>

        <div class="wrapper">

         <div id="one">

        <form name="form">

         <fieldset>

        <legend>BILLING</legend>

         <div> <label for="ex1">Procedure/Drug</label>

         <input type="text" name="procdrug" id="procdrug"/><br><br>

      <label>Amount</label>

      <input type="text" name="amount" id="amount"/><br><br>

      <input type="button" onclick="addInput()" name="add" value="Add input field" style="margin-left:150px" />
      </div>  

      </fieldset>

       </form>

       </div>

       <div id="two">

       <fieldset>

      <legend>TN QUEUE</legend>


   <label><B>Procedure/Drug</b></label><label><b>Amount</b></label><br>         

   <div id="text">          

    </div>


    <label><b>Total</b></label>

  <input type="text" name="total" id="total"/>

        </fieldset> 

       </div>


         </body>
          </html>

这是javascript函数

<script language="javascript">    
       fields = 0;     
        function addInput() {
        var amount=document.getElementById('amount').value;
        var pd=document.getElementById('procdrug').value;
        if (fields != 10)
      {
 document.getElementById('text').innerHTML += "<input id='pdgen' type='text'/>"; 
 document.getElementById('text').innerHTML += "<input id='amtgen' type='text'/><br />"; 
 document.getElementById('pdgen').value=pd;
 document.getElementById('amtgen').value=amount;
       fields += 1;
       }
        else
        {
        document.getElementById('text').innerHTML += "<br />Only A Maximum of 10 is allowed.";
       document.form.add.disabled=true;
       }
         }
 </script>

生成的元素值从表单中发布，并在每次提交时递增。我的问题是只提交第一个元素用新值更新：样本结果程序/药物金额 Amoxyl 200 空白元素空白元素空白元素空白元素空白元素空白元素总计

Answer 1

问题是您使用.innerHtml +=方法添加元素，这避免了之前输入的值。您需要使用appendChild方法添加新元素。这是您的新代码：

fields = 0;     
function addInput() {
  var amount=document.getElementById('amount').value;
  var pd=document.getElementById('procdrug').value;
  var br = document.createElement('br');
  if (fields != 10)
  {
    var input1 = document.createElement('input');
    input1.setAttribute('id','pdgen' + fields);
    input1.value = pd;
    var input2 = document.createElement('input');
    input2.setAttribute('id','amtgen' + fields);
    input2.value = amount;

    document.getElementById('text').appendChild(input1);
    document.getElementById('text').appendChild(input2);
    document.getElementById('text').appendChild(br);

    fields++;
  }
  else
  {
    document.getElementById('text').innerHTML += "<br />Only A Maximum of 10 is allowed.";
    document.form.add.disabled=true;
  }
}

<强> FIDDLE

使用javascript将值加载到自动生成的HTML输入元素中

1 个答案: