mettre à jour des totaux (formulaire)

Version imprimable

Bonsoir,

je souhaite mettre à jour automatiquement un champ de formulaire "total" quand une des lignes qui composent ce total est modifiée. Voici mon code :

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 type="text/javascript">
function calc1(){
totalarticle1.value=article1.value*nbarticle1.value;
}</script>
<form method="post" action="formmail.php">
Prix article1(TTC) <input size="10"
 name="article1" onchange="calc1()" type="text">
              <select name="nbarticle1" onchange="calc1()">
              <option>nbre</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              </select>
Total (TTC)&nbsp; <input size="10" name="totalarticle1"
 type="text">
...
</form>

Mais le total n'est pas mis à jour...Qu'est-ce qui ne va pas ?

09/02/2012, 23h34
NoSmoking
Bonsoir,
Code:

1 2 3 function calc1(){ totalarticle1.value=article1.value*nbarticle1.value; }
d'où sortent totalarticle1, article1 et nbarticle1 ???
09/02/2012, 23h44
laurentSc

Ce sont les noms des champs du formulaire.
10/02/2012, 07h54
andry.aime

Code:

document.forms[0].totalarticle1.value=...

On avance, mais ce n'est pas encore parfait : si je modifie le select (le nombre d'articles), ça marche, mais pas si je modifie le champ "prix" ; je remets mon code actuel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
function calc1(){
document.forms[0].totalarticle1.value=(document.forms[0].prix_article1.value)*(document.forms[0].nbarticle1.value);
}</script>
<form method="post" action="formmail.php">
Prix article1(TTC) <input size="10"
 name="prix_article1" onchange="calc1()">
 <select name="nbarticle1" onchange="calc1()">
              <option>nbre</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              </select>
Total (TTC)&nbsp; <input size="10" name="totalarticle1"
 type="text">

et d'autre part, tu peux m'expliquer ?

10/02/2012, 09h22
Bovino

Et tu indiques quand qu'il faut recalculer quand tu modifies l'input text ? :roll:
10/02/2012, 09h30
laurentSc

Avec ça

Code:

onchange="calc1()"

, ça ne suffit pas ?
10/02/2012, 09h39
Bovino

Arf... effectivement, je regardais pas le bon input... :aie:

Un onchange sur un input text est déclenché lorsque la valeur du champ est modifiée et que l'input a perdu le focus.
10/02/2012, 10h04
laurentSc

En effet ; merci du truc, et avant de cocher "résolu", peut-on m'expliquer document.forms[0]. ?
10/02/2012, 10h08
Bovino

Ca semble pourtant explicite...
document.forms est une collection référençant l'ensemble des formulaires du document.
document.forms[0] correspond au premier formulaire de ton document.
10/02/2012, 10h17
laurentSc

Merci de m'avoir mis un point sur le i.

Ca, ça marche mais j'ai une autre diffficulté, toujours avec le même formulaire : en fait l'utilisateur peut sélectionner 2 articles avec pour chacun le prix et la quantité, donc pour chacun, il a en sous-total le prix ; par contre, je voudrais aussi afficher le prix global (donc la somme des 2 sous-totaux) et c'est ça qui n'est pas encore au point : voilà ce que je fais :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<script type="text/javascript">
function calc_total()
{
document.forms[0].total.value=document.forms[0].total_article1.value+document.forms[0].total_article2.value;
}
function calc1(){
document.forms[0].total_article1.value=(document.forms[0].prix_article1.value)*(document.forms[0].nb_article1.value);
calc_total();
}
function calc2(){
document.forms[0].total_article2.value=(document.forms[0].prix_article2.value)*(document.forms[0].nb_article2.value);
calc_total();
}
 
</script>
 
<form method="post" action="formmail.php">
Prix article1(TTC) <input size="10" name="prix_article1" onchange="calc1()" type="text"><br>
 
              <br>
 
Nbre d'article1
              <select name="nb_article1" onchange="calc1()">
              <option>nbre</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              </select>
 
              <br>
 
              <br>
 
Total (TTC)&nbsp; <input size="10" name="total_article1" type="text">
 
Prix article2(TTC) <input size="10" name="prix_article2" onchange="calc2()"><br>
 
<br>
Nbre d'article2
              <select name="nb_article2" onchange="calc2()">
              <option>nbre</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              </select>
<br><br>
 
Total (TTC)&nbsp; <input size="10" name="total_article2" type="text">
 
Total de la commande&nbsp; <input size="10" name="total" type="text">

Mais le total global n'apparait pas ; que faudrait-il faire ?

10/02/2012, 14h54
NoSmoking

ce sujet à mainte fois était abordé et notamment sur http://www.developpez.net/forums/d11...que-daddition/, qui est proche de ce que tu cherches à réaliser.

de plus je te rappelles que + opère une concaténation de chaine (cela fait partie des bases).

Code:

alert("2" +"50"); // 250 mais pas 52

Citation:

de plus je te rappelles que + opère une concaténation de chaine (cela fait partie des bases).

Et pourtant, je le savais mais je fais si rarement du js que je me suis fait avoir. :(

Citation:

ce sujet à mainte fois était abordé et notamment sur...etc

Je cherche à m'inspirer de cet exemple ; pour finir, j'ai tenté de le copier exactement, mais il ne se passe rien ; me serais-je trompé en reprenant l'exemple ? :question:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<form method="post" id="formulaire">
  <script language="JavaScript" type="text/javascript"> 
<!-- function sum_elements(){ 
var somme=0; 
var result = document.getElementById('somme'); 
for(var i = 1; i<=4; i++){ 
var element = document.getElementById('chps'+i); 
if(element.value!='' && !isNaN(element.value)){ 
somme += parseFloat(element.value); } } 
result.value = somme; } //--> </script>
  <table summary="" border="0">
    <tbody>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td align="left" width="400"><u>Formulaire
1</u></td>
        <td width="160"></td>
        <td width="90"></td>
      </tr>
      <tr>
        <td align="right" width="400">Champs 1
-&gt;</td>
        <td width="160">nombre X prix U =</td>
        <td align="center" width="90"><input
 id="chps1" name="chps1" onkeyup="sum_elements();"
 size="8" value="" type="text"></td>
      </tr>
      <tr>
        <td align="right" width="400">Champs 2
-&gt;</td>
        <td width="160">nombre X prix U =</td>
        <td align="center" width="90"><input
 id="chps2" name="chps2" onkeyup="sum_elements();"
 size="8" value="" type="text"></td>
      </tr>
      <script language="JavaScript" type="text/javascript"> 
<!-- function calculchps3() { 
var chps3= document.getElementById("formulaire").elements["nbre3"].value * 
document.getElementById("formulaire").elements["prix3"].value;
 document.getElementById("formulaire").elements["chps3"].value=chps3;
sum_elements();
} //--> </script>
      <tr>
        <td align="right" width="390">Champs 3
-&gt; longueur <input name="nbre3" size="4"
 onblur="calculchps3()" value="" type="text"> X
        </td>
        <td align="right">prix du m =<input name="prix3"
 size="4" onblur="calculchps3()" value=""
 type="text"> = </td>
        <td align="center" width="90"> <input
 id="chps3" name="chps3" size="8" value=""
 type="text"></td>
      </tr>
      <script language="JavaScript" type="text/javascript"> 
<!-- function calculchps4() { 
var chps4= document.getElementById("formulaire").elements["nbre4"].value * 
document.getElementById("formulaire").elements["prix4"].value; 
document.getElementById("formulaire").elements["chps4"].value=chps4; 
sum_elements()
}
//--> </script>
      <tr>
        <td align="right" width="390">Champs 4
-&gt; longueur <input name="nbre4" size="4"
 onblur="calculchps4()" value="" type="text"> X
        </td>
        <td align="right">prix du m =<input name="prix4"
 size="4" onblur="calculchps4()" value=""
 type="text"> = </td>
        <td align="center" width="90"> <input
 id="chps4" name="chps4" size="8" value=""
 type="text"></td>
      </tr>
      <tr>
        <td align="right" height="40" valign="bottom"
 width="400"></td>
        <td align="center" height="40" valign="bottom"
 width="160"><b>Total </b></td>
        <td align="right" height="40" valign="bottom"
 width="90"><input id="somme" name="somme"
 size="8" value="" type="text"></td>
      </tr>
    </tbody>
  </table>
</form>

Bingo :P

Je suis reparti de mon code tout en m'inspirant de l'exemple montré par NoSmoking. Et voilà :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script type="text/javascript">
function calc_total()
{
nb=document.forms[0].total_article1.value;
if (nb!='' && !isNaN(nb)) somme=parseFloat(nb); else somme=0;
nb=document.forms[0].total_article2.value;
if (nb!='' && !isNaN(nb)) somme+=parseFloat(nb);
var result = document.getElementById('total');
result.value=somme;
}
function calc1(){
document.forms[0].total_article1.value=(document.forms[0].prix_article1.value)*(document.forms[0].nb_article1.value);
calc_total();
}
function calc2(){
document.forms[0].total_article2.value=(document.forms[0].prix_article2.value)*(document.forms[0].nb_article2.value);
calc_total();
}
</script>
<form method="post" action="formmail.php">Prix
article1(TTC) <input size="10" name="prix_article1"
 onchange="calc1()" type="text"><br>
  <br>
Nbre d'article1
  <select name="nb_article1" onchange="calc1()">
  <option>nbre</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  </select>
  <br>
  <br>
Total (TTC)&nbsp; <input size="10" name="total_article1"
 type="text"><br>
  <br>
Prix article2(TTC) <input size="10" name="prix_article2"
 onchange="calc2()"><br>
  <br>
Nbre d'article2
  <select name="nb_article2" onchange="calc2()">
  <option>nbre</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  </select>
  <br>
  <br>
Total (TTC)&nbsp; <input size="10" name="total_article2"
 type="text"><br>
  <br>
Total de la commande&nbsp; <input size="10" name="total"
 value="" id="total" type="text"> </form>

Citation:

Envoyé par laurentSc

Code:

1
2
3
4
5
6
7
function calc1(){
document.forms[0].total_article1.value=(document.forms[0].prix_article1.value)*(document.forms[0].nb_article1.value);
calc_total();
}
function calc2(){
document.forms[0].total_article2.value=(document.forms[0].prix_article2.value)*(document.forms[0].nb_article2.value);
calc_total();

tu n'as pas visiblement vu la phase sur la factorisation ;)

Je ne m'étais pas attardé, sachant que je n'ai que 2 éléments, mais du coup, j'ai essayé de l'intégrer, mais ça ne marche pas ; pourquoi ?

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
37
38
  <script type="text/javascript">
function calc_total()
{
nb=document.forms[0].total_article1.value;
if (nb!='' && !isNaN(nb)) somme=parseFloat(nb); else somme=0;
nb=document.forms[0].total_article2.value;
if (nb!='' && !isNaN(nb)) somme+=parseFloat(nb);
var result = document.getElementById('total');
result.value=somme;
}
function calc(indice){
document.forms[0].('total_article'+indice).value=(document.forms[0].('prix_article'+indice).value)*(document.forms[0].('nb_article'+indice).value);
calc_total();
}
 
<form method="post" action="formmail.php">Prix
article1(TTC) <input size="10" name="prix_article1"
 onchange="calc(1)" type="text"><br>
  <br>
Nbre d'article1
  <select name="nb_article1" onchange="calc(1)">
  <option>nbre</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  </select>
  <br>
  <br>
Total (TTC)&nbsp; <input size="10" name="total_article1"
 type="text"><br>
etc...
</form>

12/02/2012, 08h33
NoSmoking

et elle sort d'où cette syntaxe document.forms[0].('total_article'+indice).value?
:faq:Comment accéder aux éléments d'un formulaire ?

Citation:

et elle sort d'où cette syntaxe document.forms[0].('total_article'+indice).value ?

de mon ignorance :( +1

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<script type="text/javascript">
function calc_total()
{
nb=document.forms[0].elements['total_article'+'1'].value;
if (nb!='' && !isNaN(nb)) somme=parseFloat(nb); else somme=0;
nb=document.forms[0].elements['total_article'+'2'].value;
if (nb!='' && !isNaN(nb)) somme+=parseFloat(nb);
var result = document.getElementById('total');
result.value=somme;
}
function calc(indice){
document.forms[0].elements['total_article'+indice].value=(document.forms[0].elements['prix_article'+indice].value)*(document.forms[0].elements['nb_article'+indice].value);
calc_total();
}
</script>
<form method="post" action="formmail.php">Prix
article1(TTC) <input size="10" name="prix_article1"
 onchange="calc(1)" type="text"><br>
  <br>
Nbre d'article1
  <select name="nb_article1" onchange="calc(1)">
  <option>nbre</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  </select>
  <br>
  <br>
Total (TTC)&nbsp; <input size="10" name="total_article1"
 type="text"><br>
  <br>
Prix article2(TTC) <input size="10" name="prix_article2"
 onchange="calc(2)"><br>
  <br>
Nbre d'article2
  <select name="nb_article2" onchange="calc(2)">
  <option>nbre</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  </select>
  <br>
  <br>
Total (TTC)&nbsp; <input size="10" name="total_article2"
 type="text"><br>
  <br>
Total de la commande&nbsp; <input size="10" name="total"
 value="" id="total" type="text"> </form>