Get elementu przez część nazwy lub identyfikatora

Question

Oto przykład z mojej postaci (tylko wejścia, które chcę, ale istnieje wiele innych):

<form name="inputform" action="..." method="post"> 
<input type="hidden" name="id_qtedje_77" id="id_qtedje_77" value="0"> 
<input type="text" id="id_qte_77" name="prestation_detail_fields[77][qte_collecte]" value="0.00"> 
<input type="text" id="id_rec_77" name="prestation_detail_fields[77][reliquat_conforme]" value="0.00"> 
<input type="text" id="id_ren_77" name="prestation_detail_fields[77][reliquat_non_conforme]" value="0.00"> 
<input type="checkbox" name="prestation_detail_fields[77][dechet_non_present]" value="1"> 

<!-- another TR --> 

<input type="hidden" name="id_qtedje_108" id="id_qtedje_108" value="0"> 
<input type="text" id="id_qte_108" name="prestation_detail_fields[108][qte_collecte]" value="0.00"> 
<input type="text" id="id_rec_108" name="prestation_detail_fields[108][reliquat_conforme]" value="0.00"> 
<input type="text" id="id_ren_108" name="prestation_detail_fields[108][reliquat_non_conforme]" value="0.00"> 
<input type="checkbox" name="prestation_detail_fields[108][dechet_non_present]" value="1"> 
</form> 

Co chcę jest uzyskanie wartości nakładów, ale ponieważ formularz jest zbudowany w PHP, nie znam identyfikatora linii (77, 108).

Czy istnieje sposób na zrobienie czegoś takiego jak getElementByName('id_qtedje_%')?

Uwaga: Nie używam żadnej biblioteki i nie planuję jej używać.

Answer 1

Najprościej jest prawdopodobnie document.querySelectorAll, który cię może używać dowolnego selektora CSS z, w tym z "attribute starts with" selector, takimi jak input[id^="id_qtedje_"]. To supported on all modern browsers, and also IE8:

var elements = document.querySelectorAll('input[id^="id_qtedje_"]'); 

Jeśli chciał tylko pierwszy mecz (zamiast listy), można użyć document.querySelector zamiast. Zwraca referencję do pierwszego dopasowania w porządku dokumentu lub null, jeśli nic nie pasuje.

Alternatywnie, można nadać elementom nazwę klasy, a następnie użyć document.getElementsByClassName, ale należy pamiętać, że podczas getElementsByClassName był wspierany w starych wersjach Chrome i Firefox, IE8 nie ma, więc to not as well-supported jako bardziej przydatny querySelectorAll w czasach nowożytnych.

var elements = document.getElementsByClassName("theClassName"); 

Jeśli używasz żadnych bibliotek (jQuery, MooTools, zamknięcie, prototyp, itd.), Są one narażone na funkcję można użyć do wyszukania elementów przez niemal każdego selektora CSS, wypełnienie luk w obsłudze przeglądarki z własnym kodem. Na przykład w jQuery jest to funkcja $ (jQuery); w MooTools and Prototype jest to $$.

Answer 2

Można użyć starts with selector w jQuery

var listOfElements = $('[name^="id_qtedje_"]') 

Możesz być także zainteresowany z containsends with i selektorów

---

Korzystanie querySelectorAll można zrobić

document.querySelectorAll ("[name^=" id_qtedje_ "] ')

---

Alternatywnie:

Zakładając, że wszystkie elementy są input s, można użyć tego:

function getElementByNameStart(str){ 
var x=document.getElementsByTagName('input') 
for(var i=0;i<x.length;i++){ 
    if(x[i].indexOf(str)==0){ 
    return x[i]; 
} 
} 
} 

które można nazwać jako getElementByNameStart ("id_qtedje_")

Zauważ, że ten zwraca tylko element pierwszy tego typu. Aby powrócić wszystko:

function getElementByNameStart(str){ 
var x=document.getElementsByTagName('input') 
var a=[]; 
for(var i=0;i<x.length;i++){ 
    if(x[i].indexOf(str)==0){ 
    a.push(x[i]) 
    } 
} 
return a; 
} 

Jeśli elementy są wszelkiego rodzaju, należy wymienić „Input” z „*” (uwaga, może to uczynić swój kod powolny)