how to dynamically add javascript variable values as an attribute of an html element?

Question

the code i have is as below.i need to assign different names for input fields dynamically.i know how to do it for single variables or fields but for dymically created elements it is hard and i dont know how to do it

for(var j=1;j<=i;j++)
{
    var table = document.getElementById("ing");
    var row = table.insertRow(-1);
    //var cell8=row.incertCell(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    var cell6 = row.insertCell(5);    

    var name='ingname'+j;
    var code='ingcode'+j;
    var cur='ingcur'+j;
    var req='ingreq'+j;
    var cost='ingcost'+j;
    var date='ingdate'+j;

    cell1.innerHTML = "<input type='text' name=name>";
    cell2.innerHTML = "<input type='text' name=code>";
    cell3.innerHTML = "<input type='number' name='ingcur+i'>";
    cell4.innerHTML = "<input type='number' name='ingreq+i'>";
    cell5.innerHTML="<input type='number' name='ingcost+i'>";
    cell6.innerHTML="<input type='date' name='ingdate+i'>";
}

How are you creating the HTML elements? Are they hard-coded in your page? — daddygames, Mar 20 '19 at 14:21
yes they are.iam trying to give different names to einput fields .all input fields are being created dynamically using create element and a for loop.i ned to change the name so that i can retrieve them using php. — KIA, Mar 20 '19 at 14:27

Jeremy Corbello · Answer 1 · 2019-03-20T14:33:09.500

For your javascript, you're going to want to update the 'name' value of your input element. This is how you do that:

function updateName(id) {    
    var newName = 'code'+2;
    document.getElementById(id).setAttribute("name",newName.toString());
}

Your input element will need an ID:

<input type="text" name="tempName" id="inputID" />

Then in your HTML, call that function and pass the ID of your element. So perhaps:

document.onload(updateName("inputID"));

And to do this dynamically, there's 2 quick ways:

Get a parent element and select all of the children, then recurse through them:

var childElements = document.getElementById('parentID').children;
for (var i = 0; i < childElements.length; i++) {
    do something here...
}

Or your can give them all some distinguishable attribute and use:

document.querySelectorAll();

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

That should be good to get you started.

Kirill Murashkin · Answer 2 · 2019-03-20T14:29:43.797

0

HTML

<input id="first" type="text">
<input id="second" type="text">

Javascript

document.getElementById('first').setAttribute('name', someVariable)
document.getElementById('second').setAttribute('name', anotherVariable)

edited Mar 20 '19 at 14:29

answered Mar 20 '19 at 14:20

Kirill Murashkin

301
3
7

i need to add different names for different inputs dynamically any suggestions on how to do that? – KIA Mar 20 '19 at 14:24
But if you has come so far that you set ids, why don't you set names instead?) – Kirill Murashkin Mar 20 '19 at 14:30
i can do that for specific input fields but i have multiple fields genertaed as per the user request so didnt use em – KIA Mar 20 '19 at 14:42

score 0 · Answer 3 · answered Mar 20 '19 at 14:22

0

use JS var input = document.getElementById('someId') input.setAttribute('name', i)

answered Mar 20 '19 at 14:22

Boris Adamyan

350
2
14

how to dynamically add javascript variable values as an attribute of an html element?

3 Answers3