Récupérer tous les inputs d'un tableau [Résolu]

[lodan]

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

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

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]

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

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

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.

[RomainVALERI]

Plusieurs choses étranges quand même

Envoyé par lodan

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 :

Envoyé par lodan

client_attribut[i]

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

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

[Auteur]

Envoyé par RomainVALERI

Code :

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 :

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 :

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

par :

Code javascript :

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

[RomainVALERI]

Envoyé par Auteur

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]

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

[RomainVALERI]

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

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" ? 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]

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

Envoyé par RomainVALERI

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 :

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.