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

Version imprimable

05/11/2009, 09h35
sahuni

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

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?
06/11/2009, 14h44
sahuni

Une petite piste me serait bien utile

Tu peux t'inspirer de ceci

Code:

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>

07/11/2009, 08h50
sahuni

ç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é.
07/11/2009, 10h13
OButterlin
Si tu as à disposition le nombre d'éléments, tu peux adapter comme ceci
Code:

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:

1 2 3 4 <form name="MonFormulaire"> ... </form>
L'adaptation serait alors
Code:

1 2 3 4 5 6 for (var i = 0; i < nbrElem; i++) { var champ = document.MonFormulaire.elements["qte["+ i + "]"]; alert(champ.value); }
07/11/2009, 11h39
SpaceFrog
si tes champs se nomment

Code:

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:

document.getElemntsByName('qte[]')

comme ceci:
Code:

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;}
07/11/2009, 12h16
OButterlin
Citation:

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:

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 ;)
07/11/2009, 13h25
SpaceFrog

quel interet d'avoir un name qte[$i] ??? tu ne recupères pas d'array coté serveur ..
a moins d'avoir qte[$i][]
07/11/2009, 14h40
sahuni

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?

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

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.

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

Et mon script final :
Code:

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

07/11/2009, 17h31
SpaceFrog

Code:

tot=tot+parseInt(tabElts[i].value);

attention au parseInt ... préciser la base ...

le plus sur est encore:

Code:

tot=tot+(tabElts[i].value*1);
08/11/2009, 10h24
sahuni

OK, j'ai effectué le changement
Merci pour l'indication

Fuseau horaire GMT +2. Il est actuellement 17h29.