CODEWITHSUNDEEP
javascripthtml
Julius Gitonga
Julius Gitonga

Reputation: 311

Loading Values into auto generated HTML input elements using javascript

I am using a javascript function to populate html element generated automatically after submitting a form from a different div. Here is the 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>

Here is the javascript function

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

The generated elements values are posted from the form and increment on every submit. My problem is the only on submit first element is updated with the new value: Sample results Procedure/Drug Amount Amoxyl 200 blank element blank element blank element blank element blank element blank element Total

Upvotes: 0

Views: 2288

Answers (1)

Batu.Khan
Batu.Khan

Reputation: 3065

The problem is you are adding your elements with the .innerHtml += method which is avoiding the values entered before. You need to use appendChild method to add new elements. Here is your new code :

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

Upvotes: 1

Related Questions