[DOM] calcul valeurs cumulées

**Gaetan_** · 18/12/2007, 11h56

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

**rades2006** · 18/12/2007, 12h36

Bonjour,
il faut tout d'abord créer une fonction qui calcul la somme
exemple

Code :

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

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 :

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

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+

**matoon** · 18/12/2007, 12h45

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

**Gaetan_** · 18/12/2007, 13h09

Mille mercis pour votre aide.

je vais potasser ca.

Youpiii

**Gaetan_** · 18/12/2007, 14h00

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

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

**SpaceFrog** · 18/12/2007, 14h04

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

Code :

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

bdc.prix[$i]

Code :

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

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

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

Code :

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

NAME='prix'

eut suffit
avec

Code :

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

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

**Gaetan_** · 18/12/2007, 15h15

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

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

**SpaceFrog** · 18/12/2007, 15h24

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

**Gaetan_** · 18/12/2007, 15h33

Wow....

un immense merci pour ce travail maché.
Super.

Mea culpa pour les balise.

[DOM] calcul valeurs cumulées

JavaScript

Discussions similaires

Partager

Partager