Iterate to change HTML name fields with JavaScript

Question

How can I iterate over the following HTML using Javascript in order to add a 1 to all the name fields. For example, "account" would become "account1", etc. I cloned this row from a table, and would like to be able to distinguish between the fields of the two.

<td>
    <select name="account">…</select>
</td>
<td>
    <span>
        "$ "<input type="text" name="debit" placeholder="100">
    </span>
</td>
<td>
    <span>
        "$ "<input type="text" name="credit" placeholder="100">
    </span>
</td>
<td>
    <input type="text" name="reference">
</td>
<td>
    <input type="text" name="notes">
</td>
<td>
    <select name="account">...</select>
</td>

Spencer Wieczorek · Accepted Answer · 2016-12-10 18:17:00Z

1

One way you can do this is use querySelectorAll to get your elements inside your table, then use a loop and change their names:

var inputs = document.querySelectorAll("#myTable [name]")
inputs.forEach(function(input){
    input.name += + "1";
});

JSFiddle Demo

edited Dec 10, 2016 at 18:17

answered Dec 10, 2016 at 18:10

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

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

4 Comments

cpage Over a year ago

This worked great, except for an item <td><select name="account">...</select></td>. I probably should have included that one in my original question. (Also, I am not selecting all elements in the table, only of a certain row which has `id=entryLine1').

cpage Over a year ago

Switched the #myTable input to #myTable [name]. Works great!

Spencer Wieczorek Over a year ago

@cpage Yes sorry about that, re-read the question and changed my answer slightly. I didn't notice your select element initially.

cpage Over a year ago

And I am using, input.name = input.name.replace(/\d+/g, '') + row_count to prevent "account2" from being "account12".

newBornDeveloper · Accepted Answer · 2016-12-10 18:27:36Z

0

var all =document.getElementsByTagName("*"); for (var i=0, max=all.length; i < max; i++){ if(all[i].name){ all[i].name+=1; } }

Try this.* will give you all elements in the page.

answered Dec 10, 2016 at 18:27

newBornDeveloper

13 bronze badges

Collectives™ on Stack Overflow

Iterate to change HTML name fields with JavaScript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related