Créer un formulaire avec des outils de calcul Javascript

Version imprimable

Bonjour,
Je bloque depuis un moment sur la création d'un formulaire pour calculer des droits sociaux à savoir le calcul du RSA et de la prime d'activité en fonction des différents revenus déclarés et de la composition familiale. Il s'agit d'un outil que je dois développer sur un CMS et malheureusement, je ne peux pas utiliser le Php pour travailler sur les calculs sinon le formulaire aurait été réalisé depuis longtemps car j'arrive à me débrouiller pour faire, à peu près ce que je veux avec du Php. Par contre, avec le Javascript, j'ai du mal à bien comprendre le processus.

L'idée du formulaire est de pouvoir saisir sur les données (le salaire, la composition familiale, l'allocation logement, etc.) via des input et le calcul se fait automatiquement et change en fonction des modifications réalisées dans le formulaire sans avoir à valider celui-ci car je ne peux utiliser le bouton Submit. Du coup, je me disais qu'avec Javascript j'allais pouvoir réussir à le faire. J'ai donc commencé à écrire un programme. La première donnée saisie permet de calculer une valeur mais, par la suite, ça bloque.

Ma question est la suivante : auriez-vous un bon tutoriel, un lieu pour bien comprendre le fonctionnement du Javascript sur les formulaires ?

J'avais réussi à réaliser le formulaire en Php mais comme je ne pouvais valider le formulaire, je ne pouvais utiliser cette méthode mais, voici, tout de même, mon code en Php

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
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<?php
if (isset($_POST['simulation']))
	{
		$rsa = 524.16;
		$forfait = $_POST['logement'];
		$famille = $_POST['famille'];
		if (($famille == 1) OR ($famille == 9))
			{
				$montant = $rsa + ($rsa * 0.5);
			}
		elseif (($famille == 2) OR ($famille == 10))
			{
				$montant = $rsa + ($rsa * 0.5) + ($rsa * 0.3);
			}
		elseif ($famille == 3)
			{
				$montant = $rsa + ($rsa * 0.5) + ($rsa * 0.3) + ($rsa * 0.3);
			}
		elseif ($famille == 4)
			{
				$montant = $rsa + ($rsa * 0.5) + ($rsa * 0.3) + ($rsa * 0.3) + ($rsa * 0.4);
			}
		elseif ($famille == 5)
			{
				$montant = $rsa + ($rsa * 0.5) + ($rsa * 0.3) + ($rsa * 0.3) + ($rsa * 0.4) + ($rsa * 0.4);
			}
		elseif ($famille == 6)
			{
				$montant = $rsa + ($rsa * 0.5) + ($rsa * 0.3) + ($rsa * 0.3) + ($rsa * 0.4) + ($rsa * 0.4) + ($rsa * 0.4);
			}
		elseif ($famille == 7)
			{
				$montant = $rsa + ($rsa * 0.5) + ($rsa * 0.3) + ($rsa * 0.3) + ($rsa * 0.4) + ($rsa * 0.4) + ($rsa * 0.4) + ($rsa * 0.4);
			}
		elseif ($famille == 8)
			{
				$montant = $rsa;
				if ($forfait == 'oui')
					{
						$montant = $montant - ($montant * 0.12);
					}
			}
		elseif (($famille == 11))
			{
				$montant = $rsa + ($rsa * 0.5) + ($rsa * 0.3) + ($rsa * 0.4);
			}
		elseif (($famille == 12))
			{
				$montant = $rsa + ($rsa * 0.5) + ($rsa * 0.3) + ($rsa * 0.4) + ($rsa * 0.4);
			}
		elseif (($famille == 13))
			{
				$montant = $rsa + ($rsa * 0.5) + ($rsa * 0.3) + ($rsa * 0.4) + ($rsa * 0.4) + ($rsa * 0.4);
			}
		elseif ($famille == 14)
			{
				$montant = $rsa + ($rsa * 0.5) + ($rsa * 0.3) + ($rsa * 0.4) + ($rsa * 0.4) + ($rsa * 0.4) + ($rsa * 0.4);
			}
		elseif ($famille == 15)
			{
				$montant = $rsa + ($rsa * 0.28412);
			}
		elseif ($famille == 16)
			{
				$montant = $rsa + ($rsa * 0.28412) + ($rsa * 0.42804);
			}
		elseif ($famille == 17)
			{
				$montant = $rsa + ($rsa * 0.28412) + ($rsa * 0.42804) + ($rsa * 0.42804);
			}
		elseif ($famille == 18)
			{
				$montant = $rsa + ($rsa * 0.28412) + ($rsa * 0.42804) + ($rsa * 0.42804) + ($rsa * 0.42804);
			}
		elseif ($famille == 19)
			{
				$montant = $rsa + ($rsa * 0.28412) + ($rsa * 0.42804) + ($rsa * 0.42804) + ($rsa * 0.42804) + ($rsa * 0.42804);
			}
		elseif ($famille == 20)
			{
				$montant = $rsa + ($rsa * 0.28412) + ($rsa * 0.42804) + ($rsa * 0.42804) + ($rsa * 0.42804) + ($rsa * 0.42804) + ($rsa * 0.42804);
			}
		elseif ($famille == 21)
			{
				$montant = $rsa + ($rsa * 0.28412) + ($rsa * 0.42804) + ($rsa * 0.42804) + ($rsa * 0.42804) + ($rsa * 0.42804) + ($rsa * 0.42804) + ($rsa * 0.42804);
			}
		echo '<p>Le forfait logement est '.$forfait.'. La composition familiale est de '.$famille.'.</p>';
		$montantrsa = number_format($montant,2);
		$montantrsa = $montantrsa.' &euro;';
	}
?>
<p>
Cet outil permet de faire des simulations du droit au RSA et notamment d'&eacute;valuer l'incidence d'une reprise d'activit&eacute; professionnelle. Le r&eacute;sultat obtenu n'est qu'une estimation qui n'engage pas le D&eacute;partement, ni le calcul qui sera r&eacute;alis&eacute; par la CAF. Cette estimation sera d'autant plus fiable que l'ensemble des ressources aura bien &eacute;t&eacute; saisi.
</p>
<p>
<form method="post" action="index.php">
<table border="0" cellpadding="2" cellspacing="0">
<tr class="alt">
<td>
Composition familiale
</td>
<td>
<select name="famille">
 
<option name="famille" value="0">S&eacute;l&eacute;ctionnez...</option>
<?php
echo '<option name="famille" value="1"';
if ($famille == 1)
	{
		echo 'selected';
	}
echo '>En couple</option>';
echo '<option name="famille" value="2"';
if ($famille == 2)
	{
		echo 'selected';
	}
echo '>En couple avec 1 enfant</option>';
echo '<option name="famille" value="3"';
if ($famille == 3)
	{
		echo 'selected';
	}
echo '>En couple avec 2 enfants</option>';
echo '<option name="famille" value="4"';
if ($famille == 4)
	{
		echo 'selected';
	}
echo '>En couple avec 3 enfants</option>';
echo '<option name="famille" value="5"';
if ($famille == 5)
	{
		echo 'selected';
	}
echo '>En couple avec 4 enfants</option>';
echo '<option name="famille" value="6"';
if ($famille == 6)
	{
		echo 'selected';
	}
echo '>En couple avec 5 enfants</option>';
echo '<option name="famille" value="7"';
if ($famille == 7)
	{
		echo 'selected';
	}
echo '>En couple avec 6 enfants</option>';
echo '<option name="famille" value="8"';
if ($famille == 8)
	{
		echo 'selected';
	}
echo '>Isol&eacute;</option>';
echo '<option name="famille" value="9"';
if ($famille == 9)
	{
		echo 'selected';
	}
echo '>Isol&eacute; avec 1 enfant</option>';
if ($famille == 2)
	{
		echo 'selected';
	}
echo '<option name="famille" value="10"';
if ($famille == 10)
	{
		echo 'selected';
	}
echo '>Isol&eacute; avec 2 enfants</option>';
echo '<option name="famille" value="11"';
if ($famille == 11)
	{
		echo 'selected';
	}
echo '>Isol&eacute; avec 3 enfants</option>';
echo '<option name="famille" value="12"';
if ($famille == 12)
	{
		echo 'selected';
	}
echo '>Isol&eacute; avec 4 enfants</option>';
echo '<option name="famille" value="13"';
if ($famille == 13)
	{
		echo 'selected';
	}
echo '>Isol&eacute; avec 5 enfants</option>';
echo '<option name="famille" value="14"';
if ($famille == 14)
	{
		echo 'selected';
	}
echo '>Isol&eacute; avec 6 enfants</option>';
echo '<option name="famille" value="15"';
if ($famille == 15)
	{
		echo 'selected';
	}
echo '>Isol&eacute; major&eacute; enceinte</option>';
echo '<option name="famille" value="16"';
if ($famille == 16)
	{
		echo 'selected';
	}
echo '>Isol&eacute; major&eacute; avec 1 enfant</option>';
echo '<option name="famille" value="17"';
if ($famille == 17)
	{
		echo 'selected';
	}
echo '>Isol&eacute; major&eacute; avec 2 enfants</option>';
echo '<option name="famille" value="18"';
if ($famille == 18)
	{
		echo 'selected';
	}
echo '>Isol&eacute; major&eacute; avec 3 enfants</option>';
echo '<option name="famille" value="19"';
if ($famille == 19)
	{
		echo 'selected';
	}
echo '>Isol&eacute; major&eacute; avec 4 enfants</option>';
echo '<option name="famille" value="20"';
if ($famille == 20)
	{
		echo 'selected';
	}
echo '>Isol&eacute; major&eacute; avec 5 enfants</option>';
echo '<option name="famille" value="21"';
if ($famille == 21)
	{
		echo 'selected';
	}
echo '>Isol&eacute; major&eacute; avec 6 enfants</option>';
?>
</select>
</td>             
</tr>
<tr><td></td></tr>
</table>
<table border="0" cellpadding="2" cellspacing="0">
<tr class="alt"><td>FORFAIT LOGEMENT</td>
<td>
<INPUT type="radio" name="logement" value="oui" checked>Oui
<INPUT type="radio" name="logement" value="non">Non
</td>
<td></td><td></td>
<tr>
<td class="vert">SALAIRE NET MENSUEL</td>
<td class="vert"><input id="salairenet" type="value"  value="0"></td>
<td class="vert">REVENU GARANTI</td>
<td class="vert"><input id="revgaranti" type="value"  value=""></td>
</tr>
<tr>
<td class="vert">SALAIRE NET MENSUEL ENFANT*</td>
<td class="orange"><input id="salairenetenf" type="value"  value="0" ></td>
<td class="vert">REVENU GARANTI ENFANT</td>
<td class="orange"><input id="partenfantgar" type="value"  value=""></td>
</tr>
<tr class="alt">
<td>AUTRES RESSOURCES</td>
<td><input id="autresress" type="value"  value="0" > </td>
<td></td>   
<td></td>
</tr>
<tr class="gris">
<td>Allocation familiales </td>
<td><input type id="prs" type="text" value=""></td>
<?php
echo '<td>RSA</td>';
echo '<td><input id="rsasocle" type="value"  value="'.$montantrsa.'"></td>';
?>
</tr>
<tr class="gris">  
<td>Forfait logement </td>
<td><input id="forfaitlogement" type="value" value=""></td>
<td></td>
<td><input id="rsaactivite" type="value" value="" ></td>
</tr>
<tr class="gris">  
<td>Part enfant </td>
<td><input id="partenfant" type="value" value=""></td>
<td></td>
<td><input id="dispomensuel"  type="hidden" value=""></td>
</tr>
<tr>
<td></td>
<td><INPUT type="submit" name="simulation" value="SIMULATION"></td>
</tr>
<tr>
<td><input id="sum" type="hidden" value="" ></td>
</tr>
</table>
</form>
</p>

En ce qui concerne la formule de calcul, le principe est le même pour le PHP et JavaScript : en entrée vous avez les données (application du forfait oui ou non, nombre de membre dans la famille, etc.) et la formule retourne le résultat en fonction des ces différentes entrée.
La différence est qu'en PHP vous fournissez ces données avec une requête POST envoyée à la page.
Et en JavaScript, les données sont dans les champs du formulaire donc vous devez lire la valeur du champ. Si vous utilisez jQuery par exemple, cela se fait avec ce code :

Code:

var famille = $("select[name=\"famille\"]").prop("value");

Ensuite, il faut choisir quand le calcul se fait. Si par exemple cela se fait à l'envoi du formulaire (évènement "submit"), le code avec jQuery serait quelque chose comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $("form").submit(function () { // lecture des données var famille = $("select[name=\"famille\"]").prop("value"); ... // calculs var resultat = formuleCalcul(famille, forfait, salaire); // affichage du résultat ... });

27/01/2018, 02h05
rico the hobbit

Merci Mathieu pour ton retour que je vais lire attentivement et je vais voir si ça fonctionne. L'idée que j'avais mais je ne sais pas si c'est possible, c'était de réaliser les calculs au moment où l'utilisateur modifie une donnée, je crois avec "onchange"...
27/01/2018, 10h53
mathieu

Citation:

Envoyé par rico the hobbit

réaliser les calculs au moment où l'utilisateur modifie une donnée

Pour cela, vous faites une fonction qui réalise toutes les opérations (lecture des champs, calcul et affichage).
Et ensuite vous accrochez cette fonction aux évènements "change" de tous les champs :
http://api.jquery.com/change/

Je n'ai pas fini de faire tous les calculs mais les premiers résultats sont bons. Je ne suis pas sûr d'utiliser les bonnes méthodes mais, en tout cas, ça marche !!! Merci Mathieu pour tes éclairages. ça fait du bien quand ça fonctionne :D

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
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<script type="text/javascript">
var rsa = 524.68, enfant = 0, montant = 0, forfait = 0;
function calculRsa()
        {
                var compo = document.forms["formulaire"].elements["famille"].value;
                var logement = document.forms["formulaire"].elements["forfaitlogement"].value;
                var autreressource = document.forms["formulaire"].elements["autreressource"].value;
                //Calcul du montant du RSA en fonction de la composition familiale
                if (compo == 1 || compo == 9)
                        {
                                montant = rsa + (rsa * 0.5);
                        }
                else if (compo == 2 || compo == 10)
                        {
                                montant = rsa + (rsa * 0.5) + (rsa * 0.3);
                        }
                else if (compo == 3)
                        {
                                montant = rsa + (rsa * 0.5) + (rsa * 0.3) + (rsa * 0.3);
                        }
                else if (compo == 4)
                        {
                                montant = rsa + (rsa * 0.5) + (rsa * 0.3) + (rsa * 0.3) + (rsa * 0.4);
                        }
                else if (compo == 5)
                        {
                                montant = rsa + (rsa * 0.5) + (rsa * 0.3) + (rsa * 0.3) + (rsa * 0.4) + (rsa * 0.4);
                        }
                else if (compo == 6)
                        {
                                montant = rsa + (rsa * 0.5) + (rsa * 0.3) + (rsa * 0.3) + (rsa * 0.4) + (rsa * 0.4) + (rsa * 0.4);
                        }
                else if (compo == 7)
                        {
                                montant = rsa + (rsa * 0.5) + (rsa * 0.3) + (rsa * 0.3) + (rsa * 0.4) + (rsa * 0.4) + (rsa * 0.4) + (rsa * 0.4);
                        }
                else if (compo == 8)
                        {
                                if (logement == 'oui')
                                        {
                                                montant = rsa - (rsa * 0.12);
                                                forfait = rsa * 0.12;
                                        }
                                else
                                        {
                                                montant = rsa;
                                        }
                        }
                else if (compo == 11)
                        {
                                montant = rsa + (rsa * 0.5) + (rsa * 0.3) + (rsa * 0.4);
                        }
                else if (compo == 12)
                        {
                                montant = rsa + (rsa * 0.5) + (rsa * 0.3) + (rsa * 0.4) + (rsa * 0.4);
                        }
                else if (compo == 13)
                        {
                                montant = rsa + (rsa * 0.5) + (rsa * 0.3) + (rsa * 0.4) + (rsa * 0.4) + (rsa * 0.4);
                        }
                else if (compo == 14)
                        {
                                montant = rsa + (rsa * 0.5) + (rsa * 0.3) + (rsa * 0.4) + (rsa * 0.4) + (rsa * 0.4) + (rsa * 0.4);
                        }
                else if (compo == 15)
                        {
                                montant = rsa + (rsa * 0.28412);
                        }
                else if (compo == 16)
                        {
                                montant = rsa + (rsa * 0.28412) + (rsa * 0.42804);
                        }
                else if (compo == 17)
                        {
                                montant = rsa + (rsa * 0.28412) + (rsa * 0.42804) + (rsa * 0.42804);
                        }
                else if (compo == 18)
                        {
                                montant = rsa + (rsa * 0.28412) + (rsa * 0.42804) + (rsa * 0.42804) + (rsa * 0.42804);
                        }
                else if (compo == 19)
                        {
                                montant = rsa + (rsa * 0.28412) + (rsa * 0.42804) + (rsa * 0.42804) + (rsa * 0.42804) + (rsa * 0.42804);
                        }
                else if (compo == 20)
                        {
                                montant = rsa + (rsa * 0.28412) + (rsa * 0.42804) + (rsa * 0.42804) + (rsa * 0.42804) + (rsa * 0.42804) + (rsa * 0.42804);
                        }
                else if (compo == 21)
                        {
                                montant = rsa + (rsa * 0.28412) + (rsa * 0.42804) + (rsa * 0.42804) + (rsa * 0.42804) + (rsa * 0.42804) + (rsa * 0.42804) + (rsa * 0.42804);
                        }
                montant = montant - autreressource;
                if (montant > 0)
                        {
                                arrondi = montant*100;
                                arrondi = Math.round(arrondi);
                                montant = arrondi/100;
                                document.getElementById('rsatotal').value = montant;
                        }
                else
                        {
                                document.getElementById('rsatotal').value = 0;
                        }
                arrondi = forfait*100;
                arrondi = Math.round(arrondi);
                forfait = arrondi/100;
                document.forms["formulaire"].elements["forfait"].value = forfait;
        }
 
</script>
<body>
<p>
Cet outil permet de faire des simulations du droit au RSA et notamment d'évaluer l'incidence d'une reprise d'activité professionnelle. <strong>Le résultat obtenu n'est qu'une estimation qui n'engage pas le Département, ni le calcul qui sera réalisé par la CAF. Cette estimation sera d'autant plus fiable que l'ensemble des ressources aura bien été saisi.</strong>
</p>
<p>
<form method="post" action="index.php" name="formulaire">
<table border="0" cellpadding="2" cellspacing="0">
<tr class="alt">
<td>Composition familiale (<i>1</i>)</td>
<td>
  <select name="famille" onchange="calculRsa()">
   <option name="famille" value="0">Séléctionnez...</option>
   <option name="famille" value="1">En couple</option>
   <option name="famille" value="2">En couple avec 1 enfant</option>
   <option name="famille" value="3">En couple avec 2 enfants</option>
   <option name="famille" value="4">En couple avec 3 enfants</option>
   <option name="famille" value="5">En couple avec 4 enfants</option>
   <option name="famille" value="6">En couple avec 5 enfants</option>
   <option name="famille" value="7">En couple avec 6 enfants</option>
   <option name="famille" value="8">Isolé</option>
   <option name="famille" value="9">Isolé avec 1 enfant</option>
   <option name="famille" value="10">Isolé avec 2 enfants</option>
   <option name="famille" value="11">Isolé avec 3 enfants</option>
   <option name="famille" value="12">Isolé avec 4 enfants</option>
   <option name="famille" value="13">Isolé avec 5 enfants</option>
   <option name="famille" value="14">Isolé avec 6 enfants</option>
   <option name="famille" value="15">Isolé majoré enceinte</option>
   <option name="famille" value="16">Isolé majoré avec 1 enfant</option>
   <option name="famille" value="17">Isolé majoré avec 2 enfants</option>
   <option name="famille" value="18">Isolé majoré avec 3 enfants</option>
   <option name="famille" value="19">Isolé majoré avec 4 enfants</option>
   <option name="famille" value="20">Isolé majoré avec 5 enfants</option>
   <option name="famille" value="21">Isolé majoré avec 6 enfants</option>
  </select> 
 </td>             
</tr>
<tr>
<td></td>
</tr>
</table>
<table border="0" cellpadding="2" cellspacing="0">
<tr class="alt">
<td>Forfait Logement (2)</td>
    <td>
  <INPUT type= "radio" name="forfaitlogement" value="oui" checked onchange="calculRsa()"> oui</INPUT>
  <INPUT type= "radio" name="forfaitlogement" value="non" onchange="calculRsa()"> non</INPUT>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="vert">SALAIRE NET MENSUEL</td>
<td class="vert">
            <input id="salairenet" type="value"  value="0" title="ou rémunération stage ou congés maternité ou durant les trois premiers mois : maladie ou accident travail / maladie professionnelle (à partir du 4ème mois : autres ressources)"></td>
   <td class="vert">SALAIRE DU CONJOINT</td>
   <td class="vert"><input type="value"></td>
</tr>
<tr>
<td class="vert">SALAIRE NET MENSUEL ENFANT (<i>3</i>)</td>
<td class="orange"><input type="value"  value="0" ></td>
<td class="vert">REVENU GARANTI ENFANT</td>
<td class="orange"><input type="value"  value="0" ></td>
</tr>
<tr class="alt">
<td>AUTRES RESSOURCES (<i>4</i>)</td><td><input name="autreressource" type="value"  value="0" onchange="calculRsa()"></td>
<td></td>
<td></td>
</tr>
<tr class="gris">
	<td>Allocation familiales </td><td><input type type="value" value="" ></td>
	<td>RSA</td><td><input id="rsatotal" type="value"  value=""></td>
</tr>
<tr class="gris">  
	<td>Forfait logement </td><td><input name="forfait" type="value" value="" onchange="calculRsa()"></td>
	<td>Prime d'Activité</td><td><input id="primeActif" type="value" value="" onchange="calculRsa()"></td>
</tr>
<tr class="gris">  
	<td>Part enfant </td><td><input id="partenfant" type="value" onchange="updatesum()"  value="" onFocus="this.blur()"></td>
	<td></td><td></td>
</tr>
</table>
</form>
</p>