[DOM] calcul valeurs cumulées

Version imprimable

18/12/2007, 11h56
Gaetan_

[DOM] calcul valeurs cumulées

Bonjour à tous,

Voilà, j'ai un formulaire qui ressemble grosso modo à ca :

<INPUT TYPE='text' NAME='prix[1]' value='9'>
<INPUT TYPE='text' NAME='prix[2]' value='50'>
...
<INPUT TYPE='text' NAME='prix[30]' value='22'>

Dans 'prix[$i], $i n'étant pas une valeur fixe je peux aussi bien avoir en fin de chaine prix[50] ou prix[250].
J'espère être assez claire...gloups.

Comment faire pour avoir une formule qui calcule ainsi l'ensemble de ces valeurs (9+50+...+22) sensible au onchange par exemple si l'on en modifie une ?

Pardon pour mon ignorance js...

Merci à vous
18/12/2007, 12h36
rades2006
Bonjour,
il faut tout d'abord créer une fonction qui calcul la somme
exemple
Code:

1 2 3 4 5 6 7 8 9 function somme() { var total=0; for(var i ;i<nbreOfValeur;i++) {total=total+Integer.parseInt(NomFormulaire.Prix[i]); } return total }
normalement il faut afficher le total quelque part donc tu doit créer une td ou tr ou ... avec un id
exemple
<td id="lasomme">la somme doit apparaitre ici</td>
puis tu dois créer une fonction qui modifier le total à chaque modification dans le formulaire (c'est le DHTML) innerHTML permet d modifier le contenu du td dynamiquement.
Code:

1 2 3 4 5 function afficherSomme(){ document.getElementById("lasomme").innerHTML=somme(); }
en fin tu doit appeller la fonction afficherSomme() à chaque modification de tes champs
PS: je n'ai pas tester ce code
A+
18/12/2007, 12h45
matoon

Met tout tes INPUT de prix entre deux balise, puis dans ton script utilise le DOM pour boucler sur les enfants (les input) de ta balise.
http://javascript.developpez.com/faq/?page=DOM
18/12/2007, 13h09
Gaetan_

Mille mercis pour votre aide.

je vais potasser ca.

Youpiii

Pardon, je dois être un boulet, j'essaye dans tous les sens.
Un script de base du style :

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
<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
function somme()
{ var total=0;
for(var $i ;$i<3;$i++)
{total=total+Integer.parseInt(bdc.prix[$i]);
}
return total
}
function afficherSomme(){
 
document.getElementById("lasomme").innerHTML=somme();
}
</SCRIPT>
</HEAD>
 
 <BODY>
<form name='bdc'>
<TABLE>
<TR><TD><INPUT TYPE='text' NAME='prix[1]' value='9' onchange='afficherSomme()'></TD></TR>
<TR><TD><INPUT TYPE='text' NAME='prix[2]' value='3' onchange='afficherSomme()'></TD></TR>
<TR><TD><INPUT TYPE='text' NAME='prix[3]' value='2' onchange='afficherSomme()'></TD></TR>
<TR><td id="lasomme">la somme doit apparaitre ici</TD></TR>
</TABLE>
</form>

Ne donne rien
Pardon...

18/12/2007, 14h04
SpaceFrog

essaye déja d'utilise une syntaxe plus correct ...

Code:

bdc.prix[$i]

:vomi:

Code:

document.forms['bdc'].elements['prix['+$i+']']

mais tu te compliques vraiment avec un tel nommage ...

Code:

NAME='prix'

eut suffit
avec

Code:

document.forms['bdc'].elements['prix'][$i]

pardon pour ma bétise ou au moins mon ignorance mais le souci demeure le même :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
function somme()
{ var total=0;
for(var $i ;$i<3;$i++)
{total=total+Integer.parseInt(document.forms['bdc'].elements['prix'][$i]);
}
return total
}
function afficherSomme(){
 
document.getElementById("lasomme").innerHTML=somme();
}
</SCRIPT>
</HEAD>
 
 <BODY>
<form name='bdc'>
<TABLE>
<TR><TD><INPUT TYPE='text' NAME='prix' value='9' onchange='afficherSomme()'></TD></TR>
<TR><TD><INPUT TYPE='text' NAME='prix' value='3' onchange='afficherSomme()'></TD></TR>
<TR><TD><INPUT TYPE='text' NAME='prix' value='2' onchange='afficherSomme()'></TD></TR>
<TR><td id="lasomme">la somme</TD></TR>

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
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
  <head>
        <meta http-equiv="content-type" content="text/html; utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
 
        <title>Gérer les jours ouvrés</title>
 
 
<SCRIPT TYPE="text/JavaScript">
function somme()
	{ var total=0;
		for( i=0 ;i<3;i++){
			total+=parseInt(document.getElementsByName('prix')[i].value);
			}
	return total;
}
 
function afficherSomme(){
document.getElementById("lasomme").innerHTML='la somme ' + somme();
}
</SCRIPT>
 
</HEAD>
 
<BODY>
<form name='bdc'>
<TABLE>
<TR><TD><INPUT TYPE='text' NAME='prix' value='9' onchange='afficherSomme()'></TD></TR>
<TR><TD><INPUT TYPE='text' NAME='prix' value='3' onchange='afficherSomme()'></TD></TR>
<TR><TD><INPUT TYPE='text' NAME='prix' value='2' onchange='afficherSomme()'></TD></TR>
<TR><td id="lasomme">la somme</TD></TR>
</html>

Le scousi proveint je mense de l'utilisation d'un table dasn le form qui masque les inputs ...
il n'est pas w3c correct de mettre un table dasn un form, la mise en page dasn un form se fait au moyen de fieldset ...

P.S. pense aux balises code ... merci ;)

18/12/2007, 15h33
Gaetan_

Wow....

un immense merci pour ce travail maché.
Super.

Mea culpa pour les balise.