id =の値を持つすべての要素を変更する

Question

私はphp forループによって生成された入力ボタンを持っています。ここ

は、それを出力するものである：

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

は、どのように私はすべての入力の「提出」IDまたは名前を持つの値を変更できますか？ 「私はすべてのinputの値を変更するにはどうすればよい

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

：

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

私はgetElementsByName試みたが、全くそのdidntの仕事：

iは getElementByIdが、入力の変更のみを試してみました？

私は定期的にjavascriptが必要です。通常のjavascriptでは不可能な場合は、jqueryも問題ありません。

Answer 1

IDは一意である必要があります。

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

Answer 2

あなたはそうのようにjqueryのを使用することができます。

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

Answer 3

代わりのIDが一意であるため、@RiggsFollyはそうあなたがクラスを追加することができます示唆したように、あなたがクラスを使用することができます使用して例class="btn"とあなたのjsブロックであなたは言うことができます：

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

jQueryので

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

：

$('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がノード・リストではなく、配列を返し、それがforEach提供し、それはIDが一意であることが想定される等

Answer 5

filter、map、sliceようなアレイはない、他のすべての小ぎれいな機能を提供していません、 getElementByIdは1つの要素のみを返します。

代わりに、タグのclass属性を使用し、getElementsByClassNameを使用してリストを取得する必要があります。これはコレクションを返し、forループを使って反復処理を行うことができます。

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