Discussion :

[lodan]

Bonjour,

J'ai le code html suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('attribut').value

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

Que dois-je utiliser ?

Merci d'avance

[RomainVALERI]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 )

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

[RomainVALERI]

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

[lodan]

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

[lodan]

et avec un getElementsByName ça fonctionnerait pas aussi ?

Code html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[RomainVALERI]

Plusieurs choses étranges quand même

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

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

client_attribut[i]

d'où elle sort celle-là ? variable spontanée ? une globale surprise ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Auteur]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

oh tu n'as pas honte Romain ????
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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

par :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[RomainVALERI]

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

Tiens c'est pas faux merci de l'avoir remarqué

[Watilin]

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

[RomainVALERI]

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

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" ? 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 (ou je me défenestre avec deux bébés ewok dans les bras. )

[Auteur]

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

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

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

[lodan]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.