Setting value of all input fields with X ID using JS

Question

I am using JS to set multiple forms which have the following hidden input.

<input type="hidden" name="sGUID" id="sGUID" value="">

Using my JS function I use

document.getElementById("sGUID").value = "my value goes here";

The problem is this only sets the last instance of the sGUID to the value set. How can I ensure all of them are set to this?

That's because IDs must be unique. Perhaps use classes instead and iterate over them. — j08691
– j08691, Commented Jun 26, 2019 at 15:43
ids are supposed to be unique throughout the entire document. use a class or an attribute like data-id instead — Thomas
– Thomas, Commented Jun 26, 2019 at 15:43
How do you have multiple ids? You cant have multiple ids and try to access all. you will have problem — Evik Ghazarian
– Evik Ghazarian, Commented Jun 26, 2019 at 15:43
Why don't you set class names to the inputs and try with getElementsByClassName()? — Juan Velasquez
– Juan Velasquez, Commented Jun 26, 2019 at 15:45

imvain2 · Accepted Answer · 2019-06-26 15:45:36Z

3

Use classes as IDS must be unique and loop through them.

let guids = document.getElementsByClassName("sGUID");
let newstring = "string";
for(let z = 0;z < guids.length;z++){
   guids[z].value = newstring;
}

<input type="hidden" name="sGUID" class="sGUID" value="">
<input type="hidden" name="sGUID" class="sGUID" value="">
<input type="hidden" name="sGUID" class="sGUID" value="">
<input type="hidden" name="sGUID" class="sGUID" value="">

answered Jun 26, 2019 at 15:45

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

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

1 Comment

R3tep Over a year ago

Note: It's a bad practice to use .length directly on the comparison. Why ? Because here, .length is executed on every iteration (not good for performance). And if you change the length of the array you can create an infinite loop ! It's better to create another variable and put the length into.

R3tep · Accepted Answer · 2019-06-26 15:47:23Z

2

You can use querySelectorAll and loop to change all inputs value

let inputs = document.querySelectorAll('input[name="sGUID"]');
for(let l = inputs.length;l--;){
   inputs[l].value = "my value goes here";
}

answered Jun 26, 2019 at 15:47

R3tep

12.9k10 gold badges53 silver badges77 bronze badges

Comments

zmag · Accepted Answer · 2019-06-26 16:04:17Z

1

You can't have the same id value.

If you have sGUID as name values, try the below:

var sGUIDs = document.getElementsByName("sGUID");

for (var i = 0; i < sGUIDs.length; i++) {
    sGUIDs[i].value = "my value goes here";
}

<input type="hidden" name="sGUID" value="1">
<input type="hidden" name="sGUID" value="2">
<input type="hidden" name="sGUID" value="3">

edited Jun 26, 2019 at 16:04

answered Jun 26, 2019 at 15:47

zmag

8,27112 gold badges39 silver badges47 bronze badges

1 Comment

R3tep Over a year ago

Note: It's a bad practice to use .length directly on the comparison. Why ? Because here, .length is executed on every iteration (not good for performance). And if you change the length of the array you can create an infinite loop ! It's better to create another variable and put the length into.

InvalidSyntax · Accepted Answer · 2019-06-26 15:48:56Z

1

This is actually a rewrite of @zmag's response, just in shorthand.

document.getElementsByName('sGUID').forEach(function(ele, idx) {
   ele.value = 'TESTVALUE';
})

answered Jun 26, 2019 at 15:48

InvalidSyntax

9,60721 gold badges89 silver badges140 bronze badges

Collectives™ on Stack Overflow

Setting value of all input fields with X ID using JS

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related