Calculs avec un formulaire

**fredericbdr** · 02/02/2011, 21h33

Bonjour,
Je ne suis pas très fort en Javascript mais j'essaye de faire une petite application pour faire des calculs assez simples sur des nombres rentrés par un utilisateur dans des balises input type=text...
L'utilisateur doit rentrer 20 valeurs dans un tableau, puis à l'aide d'une fonction, ça calcul certaines valeurs et les affiche dans un tableau.
J'ai un soucis avec mon code, le calcul ne se fait pas, ça me met "NaN" dans les cellules.
Pour comprendre, voici une image présentant le tableau avec les 20 valeurs que doit rentrer un utilisateur. Les lettres à l'intérieur déterminent le nom de chacuns des name="" dans mon formulaire.
Je dois donc calculer et afficher les valeurs de p1 à p10 à l'aide des données rentrées (q1 à q20). (Je ne m'occupe pas pour le moment de la variable nta et des valeurs de p11 à p14).

Voici mon code :

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
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
<SCRIPT LANGUAGE="JavaScript">
 
    function calcul_form() {
      // le with ci-dessous permet d'abréger "document.forms.form1.p1.value" en "p1.value"
      with (document.forms.form1) {
       var total=0;
       var nta=0;
 
       total = q1.value * q11.value *1 + q2.value * q12.value *1 + q3.value * q13.value *1 + q4.value * q14.value *1 + q5.value * q15.value *1 + q6.value * q16.value *1 + q7.value * q17.value *1 + q8.value * q18.value *1 + q9.value * q19.value *1 + q10.value * q20.value *1 ;
           // (total=MBT) Ai mis les *1 ci-dessus afin que les + fassent une somme arithmétique et non pas une concaténation de chaînes de caractères 
 
		nta = q1.value *1 + q2.value *1 + q3.value *1 + q4.value *1 + q5.value *1 + q6.value *1 + q7.value *1 + q8.value *1 + q9.value *1 + q10.value ; 
 
		p1.value = (q1.value * q11.value)/(total.value) ;
		p2.value = (q2.value * q12.value)/(total.value) ;
		p3.value = (q3.value * q13.value)/(total.value) ;
		p4.value = (q4.value * q14.value)/(total.value) ;
		p5.value = (q5.value * q15.value)/(total.value) ;
		p6.value = (q6.value * q16.value)/(total.value) ;
		p7.value = (q7.value * q17.value)/(total.value) ;
		p8.value = (q8.value * q18.value)/(total.value) ;
		p9.value = (q9.value * q19.value)/(total.value) ;
		p10.value = (q10.value * q20.value)/(total.value) ;
 
		p11.value = total.value * 12 ;
		p12.value = total.value * 12 * 0.21 ;
		p13.value = nta.value * 12 ;
		p14.value = nta.value * 12 * 0.21 ;
      }
    }
</SCRIPT>
 
</head>
 
<body onLoad="calcul_form()">
<FORM NAME="form1">
 
	  <table width="776" height="92" border="0" cellpadding="0">
	    <tr align="center" valign="middle">
	      <th scope="col" width="77px;"><INPUT TYPE="text" NAME="q1" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col" width="77px;"><INPUT TYPE="text" NAME="q2" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col" width="77px;"><INPUT TYPE="text" NAME="q3" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q4" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q5" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q6" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q7" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q8" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q9" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q10" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
 
        </tr>
	    <tr align="center" valign="middle">
	      <th scope="row"><INPUT TYPE="text" NAME="q11" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></th>
	      <td><INPUT TYPE="text" NAME="q12" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q13" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q14" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q15" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q16" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q17" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
 
	      <td><INPUT TYPE="text" NAME="q18" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q19" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q20" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
        </tr>
      </table>
 
      </div>
	<!-- middle -->
	<div class="middle-sr">
 
 
	<!-- content -->     
        <div class="wrapper">
 
          <div class="content">
            <div class="simulrenta2">
              <table width="259" height="175" border="0" cellpadding="5">
                <tr>
                  <th width="113" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p1" SIZE=5></th>
                  <th width="120" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p2" SIZE=3></th>
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" NAME="p3" SIZE=3 MAXLENGTH=2></th>
 
                  <td align="center" valign="middle"><INPUT TYPE="text" NAME="p4" SIZE=3 MAXLENGTH=2></td>
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" NAME="p5" SIZE=3 MAXLENGTH=2></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" NAME="p6" SIZE=3 MAXLENGTH=2></td>
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" NAME="p7" SIZE=3 MAXLENGTH=2></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" NAME="p8" SIZE=3 MAXLENGTH=2></td>
 
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" NAME="p9" SIZE=3 MAXLENGTH=2></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" NAME="p10" SIZE=3 MAXLENGTH=2></td>
                </tr>
              </table>
            </div>
 
            <div class="simulrenta3">
              <table width="260" height="211" border="0" cellpadding="5">
 
                <tr>
                  <th width="113" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p11" SIZE=3 MAXLENGTH=2></th>
                  <th width="120" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p12" SIZE=3 MAXLENGTH=2></th>
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" NAME="p13" SIZE=3 MAXLENGTH=2></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" NAME="p14" SIZE=3 MAXLENGTH=2></td>
                </tr>
                <tr>
 
                  <th align="center" valign="middle" scope="row">&nbsp;</th>
                  <td align="center" valign="middle">&nbsp;</td>
                </tr>
              </table>
            </div>
 
            <div class="simulrenta4">
              <table width="400" height="228" border="0" cellpadding="5">
                <tr>
                  <th colspan="2" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p15" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></th>
 
                  <th width="186" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p16" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></th>
                </tr>
                <tr>
                  <th colspan="2" align="center" valign="middle" scope="row"><INPUT TYPE="text" NAME="p17" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" NAME="p18" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
                </tr>
                <tr>
                  <th height="36" colspan="3" align="center" valign="middle" scope="row">&nbsp;</th>
                </tr>
 
                <tr>
                  <th width="126" height="46" align="center" valign="middle" scope="row">&nbsp;</th>
                  <th height="46" colspan="2" align="left" valign="middle" scope="row"><INPUT TYPE="text" NAME="p19" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></th>
                </tr>
              </table>
             	<INPUT TYPE="SUBMIT" VALUE="Calculer" onClick="calcul_form()">
				<INPUT TYPE="RESET" VALUE="Effacer" > 
 
              </FORM>

Merci de m'aider.

Calculs avec un formulaire

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager