web-dev-qa-db-fra.com

Récupérer l'élément par une partie du nom ou de l'ID

Voici un exemple de mon formulaire (seulement les entrées que je veux, mais il y en a beaucoup d'autres):

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

Ce que je veux, c'est obtenir des valeurs d'entrées, mais comme le formulaire est construit en PHP, je ne connais pas l'identifiant de ligne (77, 108).

Existe-t-il un moyen de faire quelque chose comme getElementByName('id_qtedje_%')?

Remarque: je n'utilise aucune bibliothèque et je n'envisage pas d'en utiliser une.

javascriptforms
25
pistou

Votre meilleur pari est probablement document.querySelectorAll , avec lequel vous pouvez utiliser n'importe quel sélecteur CSS, y compris un sélecteur "l'attribut commence par" comme input[id^="id_qtedje_"]. C'est pris en charge sur tous les navigateurs modernes, et aussi IE8 :

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

Si vous vouliez juste la première correspondance (plutôt qu'une liste), vous pouvez utiliser document.querySelector au lieu. Il renvoie une référence à la première correspondance dans l'ordre du document, ou null si rien ne correspond.

Alternativement, vous pouvez donner aux éléments un nom de classe, puis utiliser document.getElementsByClassName , mais notez que tandis que getElementsByClassName était pris en charge dans les anciennes versions de Chrome et Firefox, IE8 ne l'a pas, donc c'est pas comme bien supporté comme le querySelectorAll le plus utile de l'ère moderne.

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

Si vous utilisez des bibliothèques (jQuery, MooTools, Closure, Prototype, etc.), elles sont susceptibles d'avoir une fonction que vous pouvez utiliser pour rechercher des éléments à peu près n'importe quel sélecteur CSS, comblant les lacunes de la prise en charge du navigateur avec leur propre code . Par exemple, dans jQuery, c'est le $ (jQuery) fonction; dans MooTools et Prototype, c'est $$.

41
T.J. Crowder

Vous pouvez utiliser le commence par le sélecteur dans jQuery

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

Vous pouvez également être intéressé par les sélecteurs contient et se termine par

En utilisant querySelectorAll, vous pouvez faire

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

Alternativement:

En supposant que tous les éléments sont inputs, vous pouvez utiliser ceci:

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

qui peut être appelé comme getElementByNameStart ("id_qtedje_")

Notez que cela ne renvoie que le premier élément de ce type. Pour tout retourner:

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

Si les éléments sont de n'importe quel type, remplacez "input" par "*" (attention, cela peut ralentir votre code)

10
Manishearth