Ändern Sie alle Elemente mit ID = 's Wert

Question

Ich habe eine Eingabe-Schaltfläche, die von einer PHP-for-Schleife erzeugt wird.

hier ist, was es gibt:

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

Wie kann ich den Wert aller der Eingabe des mit der ID oder dem Namen „Eintragen“ ändern?

habe ich versucht getElementById aber, dass nur Änderungen der Eingänge:

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

ich versuchte getElementsByName aber das hat nicht funktioniert überhaupt:

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

Wie kann ich den Wert aller input ändern ' s?

Ich möchte regelmäßig Javascript. Wenn nicht mit normalem Javascript möglich, ist jQuery auch in Ordnung.

Answer 1

Die IDs müssen eindeutig sein, also ändern Sie sie.

Sie können document.getElementsByName verwenden. Da dies NodeList zurückgibt, können Sie das Array.forEach verwenden, um das Wertattribut zu ändern.

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

Sie könnten jquery wie so verwenden:

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

Answer 3

Anstelle von Ihnen Klasse, da die ID einzigartig verwenden können, ist als @RiggsFolly vorgeschlagen, so können Sie eine Klasse hinzufügen, für Beispiel class="btn" und in Ihrem js Block können Sie sagen:

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'); 

oder in Vanille JS:

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

oder tatsächlich ein wenig, setzen die querySelectorAll in eine wiederverwendbare Nutz den Anruf zu verkürzen Funktion:

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


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

Warum das in ein Array verpacken? querySelectorAll eine NodeList zurückgibt, nicht ein Array, so bietet es forEach, aber es bietet nicht alle anderen nette kleine Funktionen ein Array funktioniert, wie filter, map, slice usw.

Answer 5

Ein id soll einzigartig sein, und getElementById gibt nur ein Element zurück.

Stattdessen sollten Sie das Klassenattribut für Ihre Tags verwenden und die Liste mit getElementsByClassName abrufen.Dies gibt eine Auflistung zurück und Sie können eine for-Schleife verwenden, um darüber zu iterieren.

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