récupérer en js un tableau html issu d'un formulaire

**sahuni** · 05/11/2009, 09h35

Bonjour,
j'aimerais valider en javascript un champ de formulaire qui est en fait un tableau. Il s'agit d'une liste d'articles et il y a un champ input pour la quantité à commander.
mes champs s'appellent qte[1], qte[2] etc.
J'aimerais dans ma validation vérifier que la somme des qtés est différente de 0, mais je n'arrive pas à récupérer ces champs :
if(document.formCde.qte.value == "0") ne donne rien
if(document.formCde.qte[1].value == "0") ne donne rien
Comment procéder?
en php c'est facile. J'ai :
$qte = $_POST["qte"]; puis je travaille $qte[$i] ....
Quelqu'un peut-il m'aider?

**sahuni** · 06/11/2009, 14h44

Une petite piste me serait bien utile

**OButterlin** · 06/11/2009, 14h55

Tu peux t'inspirer de ceci

Code :

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
24
25
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
function tester()
{
    var lst = document.getElementsByName("Qte");
    for (var i = 0; i < lst.length; i++)
    {
        alert(lst[i].value);
    }
}
</script>
</head>
 
<body>
<form>
    Quantité 1 <input type="text" name="Qte"/><br>
    Quantité 2 <input type="text" name="Qte"/><br>
    <br>
    <input type="button" value="Tester" onclick="tester()"/>
</form>
</body>
</html>

**sahuni** · 07/11/2009, 08h50

ça marche bien en javascript, quand comme toi, je mets dans chaque balise input : name="Qte".
Mais ça ne fonctionne plus avec le php.
Dans mon ancien système, je fais un boucle de lecture de mes articles et dans chaque balise j'ai : name = qte['.$i.'] (je passe par une variable intermédiaire). Et je peux récupérer toutes mes quantités en php.
Par contre si je mets seulement name="Qte", je ne récupère qu'une seule quantité.

**OButterlin** · 07/11/2009, 10h13

Si tu as à disposition le nombre d'éléments, tu peux adapter comme ceci

Code :

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

1
2
3
4
5
6
for (var i = 0; i < nbrElem; i++)
{
   var champ = document.forms[0].elements["qte["+ i + "]"];
   alert(champ.value);
}

forms[0] si c'est le premier formulaire de ta page, on peut également passer par un nom si tu en as précisé un dans la balise <form>
Exemple :

Code :

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

1
2
3
4
<form name="MonFormulaire">
...
</form>

L'adaptation serait alors

Code :

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

1
2
3
4
5
6
for (var i = 0; i < nbrElem; i++)
{
   var champ = document.MonFormulaire.elements["qte["+ i + "]"];
   alert(champ.value);
}

**SpaceFrog** · 07/11/2009, 11h39

si tes champs se nomment

Code :

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

 name="qte[]"

ce qui te permets de recupérer un tableau coté serveur, js lui ne reconnait pas de tableau.
en fait les crochets[] sont pour js ces caractères comme les autres

Pour recupérer un tableau des valeurs coté client il va falloir boucler sur la collection

Code :

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

document.getElemntsByName('qte[]')

comme ceci:

Code :

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

1
2
3
4
5
var tabValues=new Array();
var tabElts=document.getElemntsByName('qte[]');
var i=0
while(tabElts[i++]){
tabValues.push(tabElts[i].value;}

**OButterlin** · 07/11/2009, 12h16

Envoyé par sahuni

Dans mon ancien système, je fais un boucle de lecture de mes articles et dans chaque balise j'ai : name = qte['.$i.']

Je pense que c'est plutôt ça

Code :

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

1
2
3
4
5
 
<input ... name="qte[0]"/>
<input ... name="qte[1]"/>
<input ... name="qte[2]"/>
...

donc le "document.getElementsByName('qte[]')" ne va pas fonctionner...
Bien sûr, c'est à sahuni de dire ce qui est

**SpaceFrog** · 07/11/2009, 13h25

quel interet d'avoir un name qte[$i] ??? tu ne recupères pas d'array coté serveur ..
a moins d'avoir qte[$i][]

**sahuni** · 07/11/2009, 14h40

Effectivement, il n'y a aucun intérêt d'avoir qte[1] , qte[2] etc dans mes balises input, mais c'est ce que j'avais fait à l'époque et ça marchait pour le php. Si je devais tout réécrire, maintenant, je ferais simplement qte[].
Ceci étant dit, j'adopterais donc volontiers la méthode correspondante.
J'ai réussi à récupérer mon nombre d'éléments et toutes mes valeurs.
Le seul problème est que le système considère que c'est une zone alphabétique.
Dans mon script js, mon besoin de départ est de vérifier qu'il y a au moins une quantité. Donc dans le script js, je fait la somme de mes qtés. J'ai mis: tot = tot+champ.value et au lieu d'avoir par exemple 5+4 = 9, j'ai 5+4= 54.
Comment transformer ma value en champ numérique?

**sahuni** · 07/11/2009, 15h24

Bon, j'ai essayé aussi l'autre méthode (adaptée) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var tabValues=new Array();
var tabElts=document.getElementsByName('qte[]');
var tot=0;
var nbreElem = '<?php echo $i; ?>' ; 
 
for (var i = 0; i < nbreElem; i++)
{
tabValues.push(tabElts[i].value);
alert(tabElts[i].value);
tot=tot+tabElts[i].value;
}

ça va aussi très bien, mais j'ai le même problème avec mon cumul des qtés.

**sahuni** · 07/11/2009, 15h44

Voilà, j'ai réussi.
Pour le champ numérique : parseInt()

Et mon script final :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var tabValues=new Array();
var tabElts=document.getElementsByName('qte[]');
var tot=0;
var nbreElem = '<?php echo $i; ?>' ; 
for (var i = 0; i < nbreElem; i++)
{
tabValues.push(tabElts[i].value);
if(tabElts[i].value=="")
{tabElts[i].value=0;}
tot=tot+parseInt(tabElts[i].value);
}
if (tot == 0) {
alert("Veuillez rentrer au moins une quantité, svp");}

Finalement, j'ai pris la méthode SpaceFrog qui me semble plus propre, mais un grand merci à tous les deux, car vos 2 réponses répondaient à mon problème et m'ont bien éclairée.
Je note soigneusement tout cela pour la prochaine fois.

Bon week-end
Sahuni