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">