Récupérer tous les inputs d'un tableau

Version imprimable

Bonjour,

J'ai le code html suivant :
Code:

1 2 3 <p><label for="attribut5">N° client</label><input name="attribut[5]" id="attribut5" </p> <p><label for="attribut11">N° poste</label><input name="attribut[11]" id="attribut11" </p> <p><label for="attribut17">N° référence</label><input name="attribut[17]" id="attribut17" </p>
Je veux récupérer dans une fonction la tableau attribut.

Code:

document.getElementById('attribut').value

ne récupère rien, la réponse est "null"

Que dois-je utiliser ?

Merci d'avance

Il n'y a aucun élément d'id "attribut", c'est normal que le getElementById renvoie undefined (et undefined n'a pas de propriété value ^^)

Il y a plusieurs manières de procéder pour t'en sortir. Par exemple, tu peux récupérer l'élément conteneur, boucler sur les inputs, et filtrer sur leur id avec une regexp voire un simple indexOf ^^

Ca pourrait ressembler à :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function tableauDesAttributs() { var tab = []; var conteneur = getElementById("idDeLElementParent"); var inputs = conteneur.getElementsByTagName("INPUT"); for (var inp, i = 0, iMax = inputs.length; i < iMax; ++i) { inp = inputs[i]; if (inp.id && (inp.id.indexOf("attribut") > -1)) { tab.push(inp.id.match(/attribut(\d+)/)[1]); } } return tab; }
(heu... sinon à part ça attention tes inputs ne sont pas fermés dans ton extrait :? probablement juste une erreur de recopie pour le post je suppose :))

26/08/2011, 17h25
lodan

Bonjour Romain,

Merci. Un id en tableau ça ne fonctionnerait pas non plus ?

Il faut donc que je boucle sur les champs input d'une partie de code html ?

Il me faut donc faire un getElementsByTagName ?
26/08/2011, 17h27
RomainVALERI

Citation:

Envoyé par lodan

Bonjour Romain,

Merci. Un id en tableau ça ne fonctionnerait pas non plus ?

Il faut donc que je boucle sur les champs input d'une partie de code html ?

Il me faut donc faire un getElementsByTagName ?

J'ai édité mon message pour rajouter un bout de code en exemple pendant que tu rédigeais ces questions :mrgreen:
26/08/2011, 17h47
lodan

En faisant un alert(tab), j'ai la valeur 5, ça vient d'où, je n'ai rien saisi de tel.

et avec un getElementsByName ça fonctionnerait pas aussi ?

Code html

Code:

1
2
3
4
 
<p><label for="attribut5">N° client</label><input  name="attribut" id="attribut5" </p>
<p><label for="attribut11">N° poste</label><input  name="attribut" id="attribut11" </p>
<p><label for="attribut17">N° référence</label><input  name="attribut" id="attribut17" </p>

Code javascript

Code:

1
2
3
4
var attribut = document.getElementsByName("attribut");
    for(var i=0;i<attribut.length;i++){
      alert( client_attribut[i].innerHTML );
    }

Mais mon alert est vide.

26/08/2011, 19h01
RomainVALERI
Plusieurs choses étranges quand même :aie:

Citation:

Envoyé par lodan

En faisant un alert(tab), j'ai la valeur 5, ça vient d'où, je n'ai rien saisi de tel.

:koi: ??? Lis ton propre code s'il te plait : id="attribut5"... le "5" a été extrait de l'id grâce à la regexp... je ne comprends pas ce qui te surprend :?

Ensuite dans ton extrait avec getElementsByName :

Citation:

Envoyé par lodan

client_attribut[i]

:koi: d'où elle sort celle-là ? variable spontanée ? :zen: une globale surprise ? :lefou:
Code:

1 2 3 4 var attribut = document.getElementsByName("attribut"); for(var i=0;i<attribut.length;i++){ alert(attribut[i].innerHTML ); }
...devrait mieux fonctionner.... sauf que...

...les inputs sont toujours pas fermés... :cry:

Citation:

Envoyé par RomainVALERI

Code:

1
2
 
    var conteneur = getElementById("idDeLElementParent");

oh 8O tu n'as pas honte Romain ???? :fessee:
Tu as oublié l'objet (ici document) qui implémente la méthode getElementById.

Plus sérieusement :

Je préfère document.getElementsByTagName() à document.getElementsByName() car j'ai eu des surprises dans le passé.
Du coup je préfère de loin le 1er script que RomainVALERI a proposé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function tableauDesAttributs() 
{
    var tab = [];
 
	// s'il y a un élément conteneur avec id
    var conteneur = document.getElementById("idDeLElementParent");
    var inputs = conteneur.getElementsByTagName("input");
 
 
	var i, iMax, inp;
 
	iMax = inputs.length;
    for (i=0; i < iMax; ++i) 
	{
        inp = inputs[i];
        if (inp.id && (inp.id.indexOf("attribut") > -1)) 
		{
            tab.push(inp.id.match(/attribut(\d+)/)[1]);
        }
    }
    return tab;
}

Toutefois tu peux remplacer :

Code:

1
2
3
 
    var conteneur = document.getElementById("idDeLElementParent");
    var inputs = conteneur.getElementsByTagName("input");

par :

Code:

1
2
3
 
// s'il n'y a pas d'élément conteneur on écrit directement :
var inputs = document.getElementsByTagName("input");

26/08/2011, 20h40
RomainVALERI

Citation:

Envoyé par Auteur

oh 8O tu n'as pas honte Romain ???? :fessee:
Tu as oublié l'objet (ici document) qui implémente la méthode getElementById.

Tiens c'est pas faux :aie: merci de l'avoir remarqué :mrgreen:
27/08/2011, 01h31
Watilin

Citation:

Envoyé par Auteur

document.getElementsByName() car j'ai eu des surprises dans le passé.

Quel genre de surprises ?

Sinon j'ai remarqué un truc dans ton code, lodan : d'abord tu nous mets des <input name="attribut[5]", puis des <input name="attribut", moi je suis paumé.
Soit il s'agit de checkboxes, et dans ce cas tu devrais les nommer name="attribut[]" (avec des crochets vides), soit il s'agit d'autre chose (y compris radio), et dans ce cas oublie les crochets.

Pour manipuler les checkboxes avec JavaScript, moi j'ai l'habitude de faire document.getElementsByName('attribut[]') ou monFormulaire.getElementsByName('attribut[]'), mais apparemment cette méthode n'est pas digne de confiance alors bon :aie:
27/08/2011, 01h47
RomainVALERI

Citation:

Envoyé par Watilin

Sinon j'ai remarqué un truc dans ton code, lodan : d'abord tu nous mets des <input name="attribut[5]", puis des <input name="attribut", moi je suis paumé.

Oui :mrgreen: Il me semble qu'il a fait la modification en cours de route pour accéder aux éléments de cette manière, même si ce n'était en réalité pas nécessaire de procéder avec le name ^^

Citation:

Envoyé par Watilin

Soit il s'agit de checkboxes, et dans ce cas tu devrais les nommer name="attribut[]" (avec des crochets vides), soit il s'agit d'autre chose (y compris radio), et dans ce cas oublie les crochets.

Il m'avait semblé que c'était presque certainement le type par défaut : type="text" ? :koi: bref ça sera à lodan de nous le dire ^^

---

PS : et au bout d'un moment..... lodan... je t'en conjure une troisième et ultime fois......
>>> Ferme ces inputs :massacre: (ou je me défenestre avec deux bébés ewok dans les bras. :calim2::aie::calim2:)
27/08/2011, 12h05
Auteur

Citation:

Envoyé par Watilin

Quel genre de surprises ?

Si mes souvenirs sont bons, sous IE getElementsByName() ne renvoie pas toujours des résultats concordants selon le DOCTYPE utilisé et selon le type d'éléments ciblés (éléments de formulaires ou non).

Citation:

Envoyé par RomainVALERI

PS : et au bout d'un moment..... lodan... je t'en conjure une troisième et ultime fois......
>>> Ferme ces inputs :massacre: (ou je me défenestre avec deux bébés ewok dans les bras. :calim2::aie::calim2:)

non pas les Ewoks ces petites boules de poils :cry: :cry: Mais tu peux te défenestrer tout seul :mrgreen:

Merci pour tout ça.

J'ai fait quelques modifs car le résultat doit passer ensuite en paramètre en ajax

Sur la base du code source html suivant :
Code:

1 2 3 <p><label for="attribut5">N° client</label><input name="attribut" id="attribut5"> </p> <p><label for="attribut11">N° poste</label><input name="attribut" id="attribut11"> </p> <p><label for="attribut17">N° référence</label><input name="attribut" id="attribut17"> </p>
J'ai retiré les chiffre sur le name qui ne servait à rien et j'ai fermé mes inputs qui était une erreur lors de la copie.

Voici mon javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 var liste_attributs = []; var i, iMax, inp; iMax = inputs.length; for (i=0; i < iMax; ++i) { inp = inputs[i]; if (inp.id && (inp.id.indexOf("attribut") > -1)) { liste_attributs.push(inp.id.match(/attribut(\d+)/)[1]+":"+document.getElementById("attribut"+inp.id.match(/attribut(\d+)/)[1]).value); } } client_attribut = "&client_attribut="+liste_attributs.join();
Je vais maintenant tester mon ajax pour la récupération des attributs.

Merci à tous.