Setting dynamically distinct id attribute using javascript for input element

Question

I am facing a problem in setting distinct ids for dynamically added input boxes in a table. The problem is:

I am inserting new rows when the user clicks on "Add new Row". Now I have to set distinct id for the input box. I have taken a static variable and increasing its value every time user clicks on add new row button. Then I am appending its value to id value lets say temp (i.e. ids will be temp1, temp2 and so on). I have taken a variable xyz as var xyz = "temp" + i (where i is the counter) and now I have to assign xyz to the id using setattribute. But as values in setattribute can only be literals, how can I use a variable in place of the value?

If you have any other methods, please let me know.

It can be a variable which holds a string as well.

gdoron
– gdoron

2012-11-12 08:19:13 +00:00
Commented Nov 12, 2012 at 8:19 — gdoron
– gdoron, Commented Nov 12, 2012 at 8:19

gdoron · Accepted Answer · 2012-11-12 08:21:38Z

3

It can be a variable which holds a string as well.

var fooId = "foo";
for (var i = 0; i <= 2; i++) {
    document.getElementsByTagName('div')[i].setAttribute('id', fooId + (i + 1));
}

Live DEMO

answered Nov 12, 2012 at 8:21

gdoron

151k59 gold badges302 silver badges376 bronze badges

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

Comments

Declan Cook · Accepted Answer · 2012-11-12 08:22:46Z

2

setAttribute allows for variables to be used as the value parameter.

eg:

var ele = document.createElement('div')
var id = 'temp1'
ele.setAttribute('id', id)

would result in:

<div id="temp1"></div>

answered Nov 12, 2012 at 8:22

Declan Cook

6,1362 gold badges37 silver badges53 bronze badges

Comments

thinklinux · Accepted Answer · 2012-11-12 08:23:02Z

2

element.setAttribute("id", xyz); Where element is your input.

answered Nov 12, 2012 at 8:23

thinklinux

1,3779 silver badges13 bronze badges

Comments

Oleg · Accepted Answer · 2012-11-12 08:57:26Z

First of all setattribute is an undefined property of an element because of case-sensitivity while setAttribute, of course, is available.

Second, you are not absolutely required to use setAttribute at all. You can simply modify the id property to achieve the very same effect:

var el = document.createElement('div'), // your element
    staticPart = 'myUniqId', // your static part of a unique id
    i = 0; // your uniqueness

el.id = staticPart + i; // assign unique id to the element
// el.setAttribute('id', staticPart + i); // does the same, but more verbose

// Let's check if it worked:
el.getAttribute('id'); // "myUniqId0"
el.id; // "myUniqId0"

Third, where did you see that

values in setattribute can only be literals

The spec says that setAttribute accepts two parameters, name and value of type DOMstring. You can pass it any value you want. Mind that it will be converted to String:

el.id = {a: 'b'};
el.id; // "[object Object]"

See http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 and https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

Marius · Accepted Answer · 2014-03-24 07:05:34Z

-1

for(;i<7;i++)
          {document.getElementById("test").innerHTML +='<form  id="form'+f+++'" method="get"><input type="text" id="in'+i+++'" size="12%"><input type="text" id="in'+i+++'" size="12%" ><input type="text" id="in'+i+++'"size="12%"><input type="text" id="in'+i+++'"size="10%" ><input type="text" id="in'+i+++'"size="10%"><input type="text" id="in'+i+++'" size="10%"><input type="text" id="in'+i+++'"size="12%"></form>'      
          }

edited Mar 24, 2014 at 7:05

Marius

15.2k9 gold badges60 silver badges80 bronze badges

answered Mar 24, 2014 at 6:24

pravin sharma

1

Collectives™ on Stack Overflow

Setting dynamically distinct id attribute using javascript for input element

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related