additions de zone texte

Version imprimable

bonjour a tous,

Je débute en javascript et je coince.
(le code javascript n'est pas de moi, malheureusement)

le code ci-dessous fonctionne parfaitement sur le premier tableau, mais je n'arrive pas a le faire tourner sur le deuxieme , 3, 4, etc...tableauxxxxxx

Quelqu'un aurait-il une solution pour moi ???

Merci d'avance.

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
 
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function addition()
{
var sum = ''; num1 = 0; num2 = 0; num3 = 0; num4 = 0; num5 = 0;
if (document.getElementById('num1').value != '')
{
num1 = eval(document.getElementById('num1').value);
}
if (document.getElementById('num2').value != '')
{
num2 = eval(document.getElementById('num2').value);
}
if (document.getElementById('num3').value != '')
{
num3 = eval(document.getElementById('num3').value);
}
if (document.getElementById('num4').value != '')
{
num4 = eval(document.getElementById('num4').value);
}
if (document.getElementById('num5').value != '')
{
num5 = eval(document.getElementById('num5').value);
}
sum = num1 - num2 - num3 - num4 - num5
document.getElementById('somme').value = eval(sum);
}
//-->
</script>
</head>
 
<body>
 
<form name="form1" method="post" action="">
 
<table align="center" width="25%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" name="num1" id="num1" onBlur="addition();"></td>
</tr>
<tr>
<td><input type="text" name="num2" id="num2" onBlur="addition();"></td>
</tr>
<tr>
<td><input type="text" name="num3" id="num3" onBlur="addition();"></td>
</tr>
<tr>
<td><input type="text" name="num4" id="num4" onBlur="addition();"></td>
</tr>
<tr>
<td><input type="text" name="num5" id="num5" onBlur="addition();"></td>
</tr>
<tr>
<td><input type="text" name="somme" id="somme" onBlur="addition();"></td>
</tr>
</table>
</form>
 
 
 
<form name="form1" method="post" action="">
 
<table align="center" width="25%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" name="num1" id="num1" onBlur="addition();"></td>
</tr>
<tr>
<td><input type="text" name="num2" id="num2" onBlur="addition();"></td>
</tr>
<tr>
<td><input type="text" name="num3" id="num3" onBlur="addition();"></td>
</tr>
<tr>
<td><input type="text" name="num4" id="num4" onBlur="addition();"></td>
</tr>
<tr>
<td><input type="text" name="num5" id="num5" onBlur="addition();"></td>
</tr>
<tr>
<td><input type="text" name="somme" id="somme" onBlur="addition();"></td>
</tr>
</table>
</form>
 
</body>
</html>

16/11/2010, 10h53
SpaceFrog

eval ??? pourquoi faire ...

parseInt(), parseFloat() ou juste *1 ...
16/11/2010, 11h02
andry.aime

Bonjour,

Tu as deux formulaires dont chaque élément de premier a un copie dans le deuxième avec le même id. Un id doit être unique dans un document.

A+.
16/11/2010, 11h03
toffou

Citation:

Envoyé par SpaceFrog

eval ??? pourquoi faire ...

parseInt(), parseFloat() ou juste *1 ...

Bonjour,

je viens de tester les civers propositions, malheureusement cela ne changent pas le probléme initial, qui est :
le script fonctionne sur le premeir tableau, mais pas sur les autres.

Merci de votre premiere reponse
16/11/2010, 11h09
toffou

Citation:

Envoyé par andry.aime

Bonjour,

Tu as deux formulaires dont chaque élément de premier a un copie dans le deuxième avec le même id. Un id doit être unique dans un document.

A+.

Je commence a comprendre, merci

Quel peut être ma solution pour que calcul se fasse, sur environ 200 tableaux, sans a avoir à créer 200 scripts !!!!!

Merci
16/11/2010, 11h09
SpaceFrog

oui il y a comme le dit andry un souci d'id ...
id = identifiant => unique sur la page

J'adhères à la remarque de andry.aime
Mais sinon ceci fonctionne :

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
 
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function addition(IdForm)
{
var sum = ''; num1 = 0; num2 = 0; num3 = 0; num4 = 0; num5 = 0;
if (document.forms[IdForm].elements[0].value != '')
{
num1 = eval(document.forms[IdForm].elements[0].value);
}
if (document.forms[IdForm].elements[1].value != '')
{
num2 = eval(document.forms[IdForm].elements[1].value);
}
if (document.forms[IdForm].elements[2].value != '')
{
num3 = eval(document.forms[IdForm].elements[2].value);
}
if (document.forms[IdForm].elements[3].value != '')
{
num4 = eval(document.forms[IdForm].elements[3].value);
}
if (document.forms[IdForm].elements[4].value != '')
{
num5 = eval(document.forms[IdForm].elements[4].value);
}
sum = num1 - num2 - num3 - num4 - num5;
document.forms[IdForm].elements[5].value = eval(sum);
}
//-->
</script>
</head>
 
<body>
 
<form name="form1" method="post" action="">
 
<table align="center" width="25%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" name="num1" id="num1" onBlur="addition('form1');"></td>
</tr>
<tr>
<td><input type="text" name="num2" id="num2" onBlur="addition('form1');"></td>
</tr>
<tr>
<td><input type="text" name="num3" id="num3" onBlur="addition('form1');"></td>
</tr>
<tr>
<td><input type="text" name="num4" id="num4" onBlur="addition('form1');"></td>
</tr>
<tr>
<td><input type="text" name="num5" id="num5" onBlur="addition('form1');"></td>
</tr>
<tr>
<td><input type="text" name="somme" id="somme" onBlur="addition('form1');"></td>
</tr>
</table>
</form>
 
 
 
<form name="form2" method="post" action="">
 
<table align="center" width="25%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" name="num1" id="num1" onBlur="addition('form2');"></td>
</tr>
<tr>
<td><input type="text" name="num2" id="num2" onBlur="addition('form2');"></td>
</tr>
<tr>
<td><input type="text" name="num3" id="num3" onBlur="addition('form2');"></td>
</tr>
<tr>
<td><input type="text" name="num4" id="num4" onBlur="addition('form2');"></td>
</tr>
<tr>
<td><input type="text" name="num5" id="num5" onBlur="addition('form2');"></td>
</tr>
<tr>
<td><input type="text" name="somme" id="somme" onBlur="addition('form2');"></td>
</tr>
</table>
</form>
 
</body>
</html>

16/11/2010, 11h19
SpaceFrog

"fonctionne" ...
utiliser eval pour ça est une hérésie ...
16/11/2010, 11h21
scourjean

Oui c'est sur parseInt() serait plus adapté au problème, d'ailleurs une fonction qui s'appelle addition et qui fait num1 -... -.... c'est louche aussi.
16/11/2010, 11h26
toffou

Citation:

Envoyé par scourjean

Oui c'est sur parseInt() serait plus adapté au problème, d'ailleurs une fonction qui s'appelle addition et qui fait num1 -... -.... c'est louche aussi.

Je suis désolé pour le nom de la fonction, mais il est vrai qu'a l'origine, cette fonction ne faisiat que de l' ADDITION, il a fallut que j'adapte cette fonction a mon soucis du jour

Merci pour la solution apportée, elle fonctionne nickel !!!!

Je regarde et essaye de bien comprendre mon erreur

Merci a tous

Citation:

Envoyé par scourjean

Oui c'est sur parseInt() serait plus adapté au problème, d'ailleurs une fonction qui s'appelle addition et qui fait num1 -... -.... c'est louche aussi.

je met en ligne les divers modifications que vous m'avez données :
1- nom de fonction
2- parseInt au lieu de eval

En espérant que d'autres profiteront de vos reflexions

Merci

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
 
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function delta(IdForm)
{
var sum = ''; num1 = 0; num2 = 0; num3 = 0; num4 = 0; num5 = 0;
if (document.forms[IdForm].elements[0].value != '')
{
num1 = parseInt(document.forms[IdForm].elements[0].value);
}
if (document.forms[IdForm].elements[1].value != '')
{
num2 = parseInt(document.forms[IdForm].elements[1].value);
}
if (document.forms[IdForm].elements[2].value != '')
{
num3 = parseInt(document.forms[IdForm].elements[2].value);
}
if (document.forms[IdForm].elements[3].value != '')
{
num4 = parseInt(document.forms[IdForm].elements[3].value);
}
if (document.forms[IdForm].elements[4].value != '')
{
num5 = parseInt(document.forms[IdForm].elements[4].value);
}
sum = num1 - num2 - num3 - num4 - num5;
document.forms[IdForm].elements[5].value = parseInt(sum);
}
//-->
</script>
</head>
 
<body>
 
<form name="form1" method="post" action="">
 
<table align="center" width="25%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" name="num1" id="num1" onBlur="delta('form1');"></td>
</tr>
<tr>
<td><input type="text" name="num2" id="num2" onBlur="delta('form1');"></td>
</tr>
<tr>
<td><input type="text" name="num3" id="num3" onBlur="delta('form1');"></td>
</tr>
<tr>
<td><input type="text" name="num4" id="num4" onBlur="delta('form1');"></td>
</tr>
<tr>
<td><input type="text" name="num5" id="num5" onBlur="delta('form1');"></td>
</tr>
<tr>
<td><input type="text" name="somme" id="somme" onBlur="delta('form1');"></td>
</tr>
</table>
</form>
 
 
 
<form name="form2" method="post" action="">
 
<table align="center" width="25%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" name="num1" id="num1" onBlur="delta('form2');"></td>
</tr>
<tr>
<td><input type="text" name="num2" id="num2" onBlur="delta('form2');"></td>
</tr>
<tr>
<td><input type="text" name="num3" id="num3" onBlur="delta('form2');"></td>
</tr>
<tr>
<td><input type="text" name="num4" id="num4" onBlur="delta('form2');"></td>
</tr>
<tr>
<td><input type="text" name="num5" id="num5" onBlur="delta('form2');"></td>
</tr>
<tr>
<td><input type="text" name="somme" id="somme" onBlur="delta('form2');"></td>
</tr>
</table>
</form>
 
</body>
</html>

16/11/2010, 11h53
RomainVALERI

Détail : pour parseInt n'oublie pas le second paramètre (>>> doc) ;)

Code:

var machin = parseInt(truc, 10);

...pour éviter une conversion implicite en octal dans le cas de données commençant par 0 ^^
16/11/2010, 15h00
toffou

Citation:

Envoyé par RomainVALERI

Détail : pour parseInt n'oublie pas le second paramètre (>>> doc) ;)

Code:

var machin = parseInt(truc, 10);

...pour éviter une conversion implicite en octal dans le cas de données commençant par 0 ^^

Merci de cette précision

Désolé j'ai un peu trainé pour mettre la fonction corrigé en ligne....

voila, c'est fait !!!

Merci encore a toutes et tous.

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
 
<script language="JavaScript">
<!--
function delta(IdFormation)
{
var sum = ''; num1 = 0; num2 = 0; num3 = 0; num4 = 0; num5 = 0;
if (document.forms[IdFormation].elements[0].value != '')
{
num1 = parseInt(document.forms[IdFormation].elements[0].value,10);
}
if (document.forms[IdFormation].elements[1].value != '')
{
num2 = parseInt(document.forms[IdFormation].elements[1].value,10);
}
if (document.forms[IdFormation].elements[2].value != '')
{
num3 = parseInt(document.forms[IdFormation].elements[2].value,10);
}
if (document.forms[IdFormation].elements[3].value != '')
{
num4 = parseInt(document.forms[IdFormation].elements[3].value,10);
}
if (document.forms[IdFormation].elements[4].value != '')
{
num5 = parseInt(document.forms[IdFormation].elements[4].value,10);
}
sum = num1 - num2 - num3 - num4 - num5;
document.forms[IdFormation].elements[5].value = parseInt(sum);
document.forms[IdFormation].elements[5].style.backgroundColor=(parseInt(sum)!=0)?'red':'green';
}
 
//-->
</script>

Au cas où tu sois amené à modifier ta page, ajouter des inputs num6, num7, ou même en retirer, tu peux aussi, sans rien changer dans ton html actuel, opter pour une version "dynamique" qui fonctionnera sans devoir corriger la fonction en cas de nouveaux éléments dans le formulaire (dans la mesure où tu conserves ton actuel choix de nommage : id de la forme "numX", X étant un ou plusieurs chiffres)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function delta(IdFormation) { var elems = document.forms[IdFormation].elements; var elemSum, nums = []; for (var i = 0, iMax = elems.length; i < iMax; ++i) { if ((/^num\d+/.test(elems[i].id)) && (elems[i].value != '')) nums.push(parseInt(elems[i].value, 10); else if (/^sum/.test(elems[i].id)) elemSum = elems[i]; } var total = nums[0]; for (var i = 1, iMax = nums.length; i < iMax; ++i) total -= nums[i]; elemSum.value = total; elemSum.style.backgroundColor = sum ? 'red': 'green'; }
(et puis, il y avait deux parseInt de trop à la fin sur des données qui n'en ont plus besoin ;))
(et puis ça démangeait mon instinct de factorisation :aie:)

25/11/2010, 00h32
toffou

Bonsoir Romain

Je viens de tester ton script, il ne me fait plus les calculs ???
Mais je découvre le JavaScript, j'ai du faire une bétise......

Par contre peux tu voir sur mon post :

Export calcul dynamique sous excel de hier à 19h27 (mardi 24)

j' ai un soucis d'export des données que l'on saisie.

Vu que les données ne sont que saisie sur la page php, je n'arrive pas a les exporter, meme en faisant un simple coller-copier du tableau (enfin juste les données non calculés)

Merci