Loading Values into auto generated HTML input elements using javascript

Question

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

You make every input have the same id ? That might be the problem. — Batu.Khan
– Batu.Khan, Commented Apr 11, 2014 at 13:23
The input grows dynamically so it would be difficult to assign a unique id for each generated — Julius Gitonga
– Julius Gitonga, Commented Apr 11, 2014 at 13:29
No it's not. You have a fields var. You can use it like document.getElementById('text').innerHTML += "<input id='pdgen"+ fields +"' type='text'/>"; — Batu.Khan
– Batu.Khan, Commented Apr 11, 2014 at 13:32
@julihx We don't care if it's difficult. There is never a valid reason to use duplicate IDs. — JLRishe
– JLRishe, Commented Apr 11, 2014 at 13:36
@BatuZet Thanks for the insight. I should not use duplicate ids but however when i i appended the fields var the generated elements do have any value — Julius Gitonga
– Julius Gitonga, Commented Apr 11, 2014 at 13:41

Batu.Khan · Accepted Answer · 2014-04-11 13:57:02Z

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

Collectives™ on Stack Overflow

Loading Values into auto generated HTML input elements using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related