javascript — изменить все элементы со значением id =

Question

javascript — изменить все элементы со значением id =

У меня есть кнопка ввода, которая создается php для цикла.

вот что он выводит:

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

Как я могу изменить значение всех входных данных с идентификатором или именем «отправить»?

Я старался getElementById но это только изменения входов:

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

Я старался getElementsByName но это не сработало вообще:

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

Как я могу изменить значение всех input«S?

Я хочу регулярный JavaScript. если это невозможно с обычным javascript, то jquery тоже подойдет.

0

getelementbyid getelementsbyname javascript jquery php

Решение

Accepted Answer

Идентификаторы должны быть уникальными, поэтому измените их.

Ты можешь использовать document.getElementsByName. Потому что это возвращает NodeList Вы можете использовать Array.forEach для того, чтобы изменить атрибут значения.

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

1

Другие решения

Вы можете использовать jquery так:

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

1

в jQuery:

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

или в ванильном JS:

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

или немного сократить фактический вызов, поместив querySelectorAll в повторно используемую служебную функцию:

function $$(selector, ctx=document){
return Array.from(ctx.querySelectorAll(selector));
}$$('input[name=submit]').forEach(function(node){
node.value = 'Next';
});

Зачем оборачивать это в массив? querySelectorAll возвращает NodeList, а не Array, поэтому он обеспечивает forEach, но он не предоставляет все другие аккуратные функции, которые выполняет массив, например filter, map, slice и т.п.

1

Вместо использования вы можете использовать класс, так как идентификатор уникален, как предложено @RiggsFolly, так что вы можете добавить класс, например class="btn" и в вашем блоке JS вы можете сказать:

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

0

Идентификатор должен быть уникальным, а getElementById будет возвращать только один элемент.

Вместо этого вы должны использовать атрибут class в ваших тегах и получить список, используя getElementsByClassName. Это возвращает коллекцию, и вы можете использовать цикл for для ее итерации.

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

0

Источник

По вопросам рекламы [email protected]