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.

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.

• javascript
• html

• It can be a variable which holds a string as well. – gdoron Commented Nov 12, 2012 at 8:19

5 Answers 5

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

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>

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

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/TR/DOM-Level-2-Core/core.html#ID-F68F082 and https://developer.mozilla/en-US/docs/DOM/element.setAttribute

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>'      
          }