Получить элемент по части имени или идентификатора

Вот пример моей формы (только те входы, которые я хочу, но есть много других):

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

Я хочу получить значения входов, но поскольку форма построена на PHP, я не знаю идентификатора строки (77, 108).

Есть ли способ сделать что-то вроде getElementByName('id_qtedje_%')?

Примечание. Я не использую какую-либо библиотеку, и я не планирую использовать ее.

Ответ 1

Лучше всего выбрать document.querySelectorAll, с помощью которого можно использовать любой селектор CSS, включая атрибут "с" селектором, как input[id^="id_qtedje_"]. Он поддерживается во всех современных браузерах, а также IE8:

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

Если вы хотите только первое совпадение (а не список), вы можете использовать document.querySelector вместо этого. Он возвращает ссылку на первое совпадение в порядке документа или null, если ничего не найдено.

В качестве альтернативы вы можете дать элементам имя класса, затем используйте document.getElementsByClassName, но обратите внимание, что, хотя getElementsByClassName поддерживался в старых версиях Chrome и Firefox, IE8 не имеет его, поэтому не поддерживается так же как более полезный querySelectorAll в современную эпоху.

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

Если вы используете какие-либо библиотеки (jQuery, MooTools, Closure, Prototype и т.д.), у них, вероятно, будет функция, которую вы можете использовать для поиска элементов почти любым селектором CSS, заполняя пробелы в поддержке браузера с помощью их собственный код. Например, в jQuery это функция $ (jQuery); в MooTools и Prototype, он $$.

Ответ 2

Вы можете использовать начинается с селектора в jQuery

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

Вы также можете быть заинтересованы в contains и заканчивается селекторы

Используя querySelectorAll, вы можете сделать

document.querySelectorAll( '[имя = "id_qtedje _" ]')

В качестве альтернативы:

Предполагая, что все элементы input s, вы можете использовать это:

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];
 }
}
}

который можно назвать getElementByNameStart ( "id_qtedje _" )

Обратите внимание, что это возвращает только первый элемент этого типа. Чтобы вернуть все:

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;
}

Если элементы любого типа, замените "enter" на "*" (будьте осторожны, это может привести к замедлению вашего кода)