JavaScript- dynamically adding input to a page

Question

i am using JavaScript to add a div on the fly. The div should contain a form input whose 'name' attribute WILL changes in value incrementally.

I have managed to do this- I however have two problems.

First Problem:

The first div that i created is cancelled out by the next dynamically created div.

thus, when i submit the form, the first dynamically created imput form is blank- but subsequent ones have values on them.

MY CODE :

html

<div id="dynamicDivSection"></div>

<button id="addbutton">add box</button>

 <div id="boxes">
   <div class="box">
       <input type="text" id='dynamic-imput' name="">   
   </div>
</div>

javascript

var addbutton = document.getElementById("addbutton");
var key = 1; 

addbutton.addEventListener("click", function() {
  key++;
  document.getElementById('dynamic-imput').name = 'ser['+key+'][\'name\']';

  var boxes = document.getElementById("boxes");
  var head  = document.getElementById("dynamicDivSection");

  var clone = boxes.firstElementChild.cloneNode(true);
  head.appendChild(clone);
});

i suspect that the problem is causing by this:

document.getElementById('dynamic-imput').name = 'ser['+key+'][\'name\']';

i.e when i create the dynamic div it creates several inputs on the page that contain the same Id. if i am correct, then perhaps teh solution is to change the Id of the newly created imput - however, i am not sure how to change the Id of a dynamically created Imput.

Second problem.

i want each dynamically created div to go to the top of the page; i.e to be placed before the earlier created dynamic div- however, at the moment each dynamically created div go directly under the first dynamically created div.

Possible duplicate of Get value of dynamic input element in form object — Hitmands
– Hitmands, Commented Aug 15, 2017 at 9:39
hi Hitmands- its not a duplicate. please look at the problem i have. its totally different from the page you showed — theSeeker
– theSeeker, Commented Aug 15, 2017 at 9:42

nanobar · Accepted Answer · 2017-08-15 09:45:19Z

0

You can insert as the first child with:

parent.insertAdjacentElement('afterbegin', nodeToInsert);

You can get and set attributes such as id with setAttribute and getAttribute. Though I'm not sure why you even need an ID here, it would be simpler not to have one and select the element with a class.

var addbutton = document.getElementById("addbutton");
var key = 1; 

addbutton.addEventListener("click", function() {
  key++;
  document.getElementById('dynamic-imput').name = 'ser['+key+'][\'name\']';

  var boxes = document.getElementById("boxes");
  var head  = document.getElementById("dynamicDivSection");

  var clone = boxes.firstElementChild.cloneNode(true);
  var clonedInput = clone.firstElementChild;
  clonedInput.setAttribute('id', clonedInput.getAttribute('id') + '-' + head.children.length);

  head.insertAdjacentElement('afterbegin', clone);
});

<div id="dynamicDivSection"></div>

<button id="addbutton">add box</button>

 <div id="boxes">
   <div class="box">
       <input type="text" id='dynamic-imput' name="">   
   </div>
</div>

answered Aug 15, 2017 at 9:45

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

theSeeker Over a year ago

hi Dominic- but what about when you have other elements within the form. for example, i also want to place a textarea- i tried to do this : var clonetwo = boxes.secondElementChild.cloneNode(true). but it did not work

Collectives™ on Stack Overflow

JavaScript- dynamically adding input to a page

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related