Change All Value Of Inputs With Same Id In Javascript

How can I change all value of same id inputs?

Solution 1:

You need to change id="secure" to class="secure" first

HTML:

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

JavaScript:

<script>
var els = document.getElementsByClassName("secure");
Array.prototype.forEach.call(els, function(el) {
    // Do stuff here
    el.setAttribute('123456');
});
</script>

Solution 2:

IDs should be unique - that's the point of them. Classes are for the opposite use, i.e. where there may be multiple instances of a single one.

Assumimg you change your IDs to classes, we can do the following:

[].forEach.call(document.querySelectorAll('.secure'), function(el) {
    el.value = '123456';
});

Solution 3:

Don't use same id multi-pal times. Use class rather then id. To see result I remove type="hidden" from your HTML.

var list = document.getElementsByClassName("secure");
for (var i = 0; i < list.length; i++) {
 list[i].setAttribute("value", "12345");
}

<input name="secure" value="" class="secure" />
<input name="secure" value="" class="secure" />
<input name="secure" value="" class="secure" />
<input name="secure" value="" class="secure" />

Solution 4:

This works - need to reference by class and then loop through all the elements to actually change the value.

<div><input type="text" class="secure" id="secure1" name="secure" value="123456"></div>
<div><input type="text" class="secure" id="secure2" name="secure" value="123456"></div>
<div><input type="text" class="secure" id="secure3" name="secure" value="123456"></div>
<div><input type="text" class="secure" id="secure4" name="secure" value="123456"></div>

<script>
function myFunction() {
    x=document.getElementsByClassName("secure");
		for (i = 0; i < x.length; i++) {
    	x[i].value="100";
    }
}
</script>

<button onclick="myFunction()">
click me
</button>

Solution 5:

You need to add a class for each elements as in a document duplicate id's are not allowed.So we can better keep a common class of our element [also I changed your elements id's for keeping unique]. getElementsByClassName() returns a nodeList of the DOM. We iterate over the element and put some value. Finally for testing I print value by id.

<input type="hidden" id="secure1" name="secure" value="" class="secure">
<input type="hidden" id="secure2" name="secure" value="" class="secure">
<input type="hidden" id="secure3" name="secure" value="" class="secure">
<input type="hidden" id="secure4" name="secure" value="" class="secure">

<script>
var list = document.getElementsByClassName("secure");
for(var i = 0; i< list.length;i++){
	document.getElementsByClassName("secure")[i].value='123456'
}
console.log(document.getElementById('secure2').value);
</script>

Share