javascript - Change all elements with id='s value - Stack Overflow

admin管理员组

文章数量:1334342

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.

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.

• javascript
• php
• jquery
• getelementbyid
• getelementsbyname

Share Improve this question Follow asked Mar 25, 2017 at 21:47 pixie123pixie123 97933 gold badges1515 silver badges2828 bronze badges 1

• 6 id has to be unique on the page or javascript only see's the last one – RiggsFolly Commented Mar 25, 2017 at 21:50

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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

You could use jquery like so:

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

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

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.

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"

本文标签： javascriptChange all elements with id39s valueStack Overflow