javascript - Change all elements with id='s value

Question

I have a an input button that is produced by a php for loop.

here is what it outputs:

<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">
<input type="submit" name="submit" id="submit" value="Submit">

how can i change the value of all the input's with the id or name "submit"?

i tried getElementById but that only changes of the inputs:

<script>
var submit_button = document.getElementById('submit');
submit_button.value = 'Next';
</script>

i tried getElementsByName but that didnt work at all:

<script>
var submit_button = document.getElementsByName('submit');
submit_button.value = 'Next';
</script>

How can i change the value of all the input's?

i want regular javascript. if not possible with regular javascript, jquery is fine too.

Answer 1

The IDs must be unique, so change them.

You can use document.getElementsByName. Because this returns a NodeList you can use the Array.forEach in order to change the value attribute.

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

<input type="submit" name="submit" id="submit1" value="Submit">
<input type="submit" name="submit" id="submit2" value="Submit">
<input type="submit" name="submit" id="submit3" value="Submit">
<input type="submit" name="submit" id="submit4" value="Submit">
<input type="submit" name="submit" id="submit5" value="Submit">
<input type="submit" name="submit" id="submit6" value="Submit">
<input type="submit" name="submit" id="submit7" value="Submit">
<input type="submit" name="submit" id="submit8" value="Submit">

Answer 2

You could use jquery like so:

$("#submit").val("Next");

Answer 3

Instead of using you can use class since the id is unique as @RiggsFolly suggested so you can add a class for example class="btn" and in your js block you can say :

var x = document.getElementsByClassName("btn");

var x = document.getElementsByClassName("btn");
    
    for(i=0; i<x.length; i++){
     x[i].value = "next";
    }

<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">
<input type="submit" name="submit" id="submit" value="Submit" class="btn">

Answer 4

in jQuery:

$('input[name=submit]').val('Next');

or in vanilla JS:

document.querySelectorAll('input[name=submit]').forEach(function(node){
    node.value = 'Next'
});

or to shorten actual the call a bit, putting the querySelectorAll into a reusable utility-function:

function $$(selector, ctx=document){
    return Array.from(ctx.querySelectorAll(selector));
}


$$('input[name=submit]').forEach(function(node){
    node.value = 'Next';
});

Why wrapping that into an Array? querySelectorAll returns a NodeList, not an Array, so it provides forEach, but it doesn't provide all the other neat little functions an array does, like filter, map, slice etc.

Answer 5

An id is supposed to be unique, and getElementById will return only one element.

Instead, you should use the class attribute on your tags and get the list using getElementsByClassName. This returns a collection and you can use a for loop to iterate over it.

for ( element in document.getElementsByClassName("submit") )
  element.value = "Next"