name attribute missing when adding new element to dom (dynamically) using jQuery

Question

I have this JavaScript function (below) that will dynamically add a new element to the DOM (no problem) except there is no name attribute added or ID value.

The ultimate goal I'm looking to achieve is to be able to dynamically add elements to a process and then be able to save it (submit via jQuery serialize) without a page refresh (in simple terms, think of adding/removing tasks to a project). Dynamically "adding" is what I'm struggling with.

Here is the stripped down code I have so far:

<div id="itemList">
    <div><input class="textInput" name="input_1"  id="input_1" type="text" /></div>
    <div><input class="textInput" name="input_2"  id="input_2" type="text" /></div>
    <div><input class="textInput" name="input_3"  id="input_3" type="text" /></div>
</div>
<div><a href="javascript:void('');" id="addNewInputField" onClick="addNewInputField();">Add New Task</a></div>

<script type="text/javascript">
function addNewInputField(){
    elParentContainer = document.getElementById('itemList');
    newElement = document.createElement('div');
    newInput = document.createElement('input');
    newInput.setAttribute('class', 'textInput');
    newInput.setAttribute('type', 'text');      
    newElement.appendChild(newInput);
    elParentContainer.appendChild(newElement);
}
</script>

and here is the outputted source I'm currently getting when clicking the "Add New Task" twice:

Here is the what I'm currently getting when you view source:

<div id="itemList">
    <div><input class="textInput" name="input_1" id="input_1" type="text"></div>
    <div><input class="textInput" name="input_2" id="input_2" type="text"></div>
    <div><input class="textInput" name="input_3" id="input_3" type="text"></div>
    <div><input class="textInput" type="text"></div>
    <div><input class="textInput" type="text"></div>
</div>

Here is the desired output when you view source:

<div id="itemList">
    <div><input class="textInput" name="input_1" id="input_1" type="text"></div>
    <div><input class="textInput" name="input_2" id="input_2" type="text"></div>
    <div><input class="textInput" name="input_3" id="input_3" type="text"></div>
    <div><input class="textInput" name="input_4" id="input_4" type="text"></div>
    <div><input class="textInput" name="input_5" id="input_5" type="text"></div>
</div>

Can someone help me modify my function to increment the newly added DOM elements?

Rion Williams · Accepted Answer · 2016-04-19 14:07:26Z

2

You could consider updating your function to see how many current elements there are (via the getElementsByClassName() function) and use that to set your id and name properties respectively when creating your new element :

<script type="text/javascript">
  function addNewInputField(){
      // Set how many elements you have with that class (to determine which
      // value to append to 'input_{x}'
      var currentInput = document.getElementsByClassName('textInput').length + 1;
      elParentContainer = document.getElementById('itemList');
      newElement = document.createElement('div');
      newInput = document.createElement('input');
      newInput.setAttribute('class', 'textInput');
      // Set your new ID attribute
      newInput.setAttribute('id', 'input_' + currentInput);
      // Set your new name attribute
      newInput.setAttribute('name', 'input_' + currentInput); 
      newInput.setAttribute('type', 'text');      
      newElement.appendChild(newInput);
      elParentContainer.appendChild(newElement);
  }
</script>

You can see a working example here and an example of what the output markup would look like below :

edited Apr 19, 2016 at 14:07

answered Apr 19, 2016 at 14:01

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

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

1 Comment

HPWD Over a year ago

This solution also worked and answers the question about how to modify the function.

Delanyo Aborchie · Accepted Answer · 2016-04-19 14:30:10Z

Based on your stripped down version, you could keep track of how many inputs you have and update them with each new addition. Here is a solution based on the code you submitted.

   <div id="itemList">
<div><input class="textInput" name="input_1"  id="input_1" type="text" /></div>
<div><input class="textInput" name="input_2"  id="input_2" type="text" /></div>
<div><input class="textInput" name="input_3"  id="input_3" type="text" /></div>

    <div><a href="javascript:void('');" id="addNewInputField" onClick="addNewInputField();">Add New Task</a></div>

    <script type="text/javascript">
     var inputCounter =  3;
     function addNewInputField(){
        var name = "input_";
        inputCounter= inputCounter+1;
        name = name.concat(inputCounter);
        elParentContainer = document.getElementById('itemList');
        newElement = document.createElement('div');
        newInput = document.createElement('input');
        newInput.setAttribute('class', 'textInput');
        newInput.setAttribute('type', 'text');
        newInput.setAttribute('name', name);
        newInput.setAttribute('id', name);      
        newElement.appendChild(newInput);
        elParentContainer.appendChild(newElement);
}
</script>

Nils · Accepted Answer · 2016-04-19 14:19:02Z

1

If you want to use jQuery please consider using code like this:

  var inputCount = $('.textInput').size();
  inputCount += 1;
  $('#itemList').append('<div><input class="textInput" name="input_'+inputCount+'" id="input_'+inputCount+'" type="text" /></div>');

Additionally it may be more appropiate to use the data attribute, you might consider it.

answered Apr 19, 2016 at 14:19

Nils

9871 gold badge10 silver badges20 bronze badges

4 Comments

HPWD Over a year ago

The original question was asking about modify the function but I'm marking this as correct since the solution is so clean. I'd like to see your answer using data-attributes and why you think it'd be more appropriate.

Nils Over a year ago

The data attribute is very useful, if you want to save more data than only your IDs. I use it for example, if I am on an edit form. Or you could save a date or complete javascript object in it. Sometimes this comes in very handy. But other times ids and names are sufficient :)

HPWD Over a year ago

That's a good point. I do also need the parent ID so including it as a data attribute would remove the need to traverse up the DOM to get it. Thanks for the tip!

HPWD Over a year ago

Implemented your solution and the data-id attribute and it worked beautifully. Just wanted to give you more props for the elegant solution.

George Pant · Accepted Answer · 2016-04-19 14:31:46Z

1

You can just count how many children your container has and then create dynamically the id and name of the next element.

function addNewInputField(){
elParentContainer = document.getElementById('itemList');
var next_input = elParentContainer.children.length+1
newElement = document.createElement('div');
newInput = document.createElement('input');
newInput.setAttribute('class', 'textInput');
newInput.setAttribute('type', 'text');      
newInput.setAttribute('name', 'input_'+next_input);      
newInput.setAttribute('id', 'input_'+next_input);   
newElement.appendChild(newInput);
elParentContainer.appendChild(newElement);

}

answered Apr 19, 2016 at 14:31

George Pant

2,1171 gold badge11 silver badges15 bronze badges

Comments

Delanyo Aborchie · Accepted Answer · 2016-04-19 14:37:57Z

1

You could keep track of the current number of inputs you have.That way it becomes easier to set the desired attributes of new inputs as you create them.

     <script type="text/javascript">
        var inputCounter =  3;
     function addNewInputField(){
        var name = "input_";
        inputCounter= inputCounter+1;
        name = name.concat(inputCounter);
        elParentContainer = document.getElementById('itemList');
        newElement = document.createElement('div');
        newInput = document.createElement('input');
        newInput.setAttribute('class', 'textInput');
        newInput.setAttribute('type', 'text');
        newInput.setAttribute('name', name);
        newInput.setAttribute('id', name);      
        newElement.appendChild(newInput);
        elParentContainer.appendChild(newElement);
    }

   </script>

answered Apr 19, 2016 at 14:37

Delanyo Aborchie

3093 silver badges5 bronze badges

1 Comment

HPWD Over a year ago

This solution also worked and answers the question about how to modify the function.

BHUVANESH MOHANKUMAR · Accepted Answer · 2016-04-19 14:05:56Z

0

Have you tried Jquery.append() functionality.

Hope this will solve your problem, where you can use to create dynamic elements and also append any text in the page.

Please see the sample and try this link , you will get better idea.

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append_ref

Let me know, if any more support needed.

Thanks, Bhuvan

answered Apr 19, 2016 at 14:05

BHUVANESH MOHANKUMAR

2,8071 gold badge35 silver badges33 bronze badges

2 Comments

BHUVANESH MOHANKUMAR Over a year ago

If I not clearly understood your problem statement, please post me what you exactly required.

HPWD Over a year ago

I'm needing input fields, not just appending text to the the list. But thank you for your contribution.

Th0rndike · Accepted Answer · 2016-04-19 16:14:26Z

0

One way to achieve this is to retrieve the last child of the collection, then use one of it's attributes to know the current index. Once this has been retrieved, it's easy to add attributes with the right contents to the newly created element:

function addNewInputField(){
    var elParentContainer = document.getElementById('itemList');

    //Get last child of list
    var inputList = elParentContainer.getElementsByTagName('input');
    var lastChild = inputList[inputList.length-1];

    //Get last index from the name attribute of last child
    var lastIndex = lastChild.getAttribute('name').split('_')[1];

    var newElement = document.createElement('div');
    var newInput = document.createElement('input');
    newInput.setAttribute('class', 'textInput');
    newInput.setAttribute('type', 'text');
    //Add new attributes to the newly created element
    newInput.setAttribute('name', 'input_'+(lastIndex++));
    newInput.setAttribute('id', 'input_'+(lastIndex++));   
    newElement.appendChild(newInput);
    elParentContainer.appendChild(newElement);
}

edited Apr 19, 2016 at 16:14

answered Apr 19, 2016 at 14:04

Th0rndike

3,4363 gold badges25 silver badges43 bronze badges

2 Comments

Th0rndike Over a year ago

to whoever -1 this, it would be nice to point out what's wrong with the answer

HPWD Over a year ago

It wasn't me that -1 your answer but your solution produces an error for me: "Uncaught TypeError: lastChild.getAttribute is not a function"

Collectives™ on Stack Overflow

name attribute missing when adding new element to dom (dynamically) using jQuery

7 Answers 7

1 Comment

Comments

4 Comments

Comments

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

4 Comments

Comments

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related