Calcul d'un total selon les champs du formulaire

**pierre_gomes** · 07/10/2011, 18h08

Bonjour,

J'ai un formulaire dans lequel il est nécessaire de faire le total : ce dernier calcule un chiffre après saisie dans le formulaire mais il est erroné ; de plus, je souhaiterais qu'à chaque champ saisi, il mette à jour ce total.
Pourriez vous m'apporter de l'aide, s'il vous plait ?
Merci.
Pierre

Code ci-joint.

**beegees** · 08/10/2011, 08h21

Bonjour,

Tu as oublié une accolade ouvrante ici :

Code :

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

if (testInt(value5) && testInt(value6))

qui doit devenir :

Code :

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

1
2
if (testInt(value5) && testInt(value6)) 
{

Plusieurs remarques constructives :

- Indente ton code
- Evite de mélanger du code js dans de l'HTML, colle plutôt ton code js dans une page externe (.js), tu la lie ensuite à ton fichier html comme ceci :

Code :

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

1
2
<script type="text/javascript" src="TaPage.js"></script>
</head>

ta fonction sera disponible avant le chargement de ta page.

- Tu as un form qui ne pointe pas vers une action

Code :

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

<form method="post" name="calcul_cotisations">

Est-il vraiment nécessaire ce form ?

Je regarde le reste.

beegees

PS: pense à indenter ton code

**pierre_gomes** · 08/10/2011, 10h21

Bonjour

J'ai pris pris en compte tes remarques ; indenter le code signifie d'utiliser l'expression text-indent ; c'est bien cela ; pour le post, c'est normal, je n'ai pas tout à fait fini, il pointera vers un fichier php. J'ai bien mis le code js dans un autre fichier mais j'ai toujours le même problème : mauvais calcul et le total ne se réactualise pas à champ changement de données.

Merci pour les précisions.
Pierre

**headmax** · 08/10/2011, 12h27

Salut juste une remarque sur ta fonction testInt qui me semble pas top.

Code :

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

1
2
3
4
 
function testInt(value) {
return value == parseInt(value);
}

Pour savoir le type d'un element javascript utilise typeof donc pour faire bien tu devrait juste faire :

Code :

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

1
2
3
4
5
6
7
8
 
function testInt(value) {
     if(typeof(value) == "numeric"){
          return parseInt(value);
     }else{
          alert("Les valeurs introduites ne sont pas des nombres");
     }
};

typeof s'applique sur des variables, objets, functions...
Pour la suite de ton problème j'ai pas tout saisit, a moins d'être plus explicite sur le problème je saisit pas trop ton programme d'autant plus que tu n'expose pas d'exemple de saisit donc trop vague et pas assez explicite.

Bonne chance

**RomainVALERI** · 08/10/2011, 12h27

Envoyé par pierre_gomes

indenter le code signifie d'utiliser l'expression text-indent ; c'est bien cela ;

Non, pas du tout ^^

Code non indenté :

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
Number.prototype.formater = function(decimales, sepDecimal, sepMilliers) {
var resultat = this.toFixed(decimales);
if (sepDecimal) resultat = resultat.replace(/\./, sepDecimal);
if (sepMilliers) {
var offset = 0;
var posPoint = resultat.indexOf((sepDecimal)?sepDecimal:".");
if (posPoint == -1)
posPoint = resultat.length;
while ((posPoint - offset) > 3) {
resultat = resultat.inserer(sepMilliers, (posPoint - offset - 3));
offset += 3;
}
}
return resultat;
}

Code indenté :

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
Number.prototype.formater = function(decimales, sepDecimal, sepMilliers) {
   var resultat = this.toFixed(decimales);
   if (sepDecimal) resultat = resultat.replace(/\./, sepDecimal);
   if (sepMilliers) {
      var offset = 0;
      var posPoint = resultat.indexOf((sepDecimal)?sepDecimal:".");
      if (posPoint == -1)
         posPoint = resultat.length;
      while ((posPoint - offset) > 3) {
         resultat = resultat.inserer(sepMilliers, (posPoint - offset - 3));
         offset += 3;
      }
   }
   return resultat;
}

Tu préfères lire lequel ?

---
(et pour ceux qui pensent que la lisibilité n'est pas importante... voici la version obfusquée...

)

Code :

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

Number.prototype.formater=function(fkhtj,fkthj,ftkhj){var ftkhj=this.toFixed(fkhtj);if(fkthj)ftkhj=ftkhj.replace(/\./,fkthj);if(ftkhj){var tfkhj=0;var tfkjh=ftkhj.indexOf((fkthj)?fkthj:".");if(tfkjh==-1)tfkjh=ftkhj.length;while((tfkjh-tfkhj)>3){ftkhj=ftkhj.inserer(ftkhj,(tfkjh-tfkhj-3));tfkhj+=3;}}return ftkhj;}

**RomainVALERI** · 08/10/2011, 12h30

Envoyé par headmax

typeof s'applique sur des variables, objets, functions...

Mais typeof n'est pas une fonction, c'est un opérateur :

Code :

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

if (typeof machin == truc)

edit : au temps pour moi, les deux syntaxes sont possibles en fait ^^ (voir MDN)

**pierre_gomes** · 08/10/2011, 15h06

J'ai inséré les modifications préconisées ; cependant, lors de la saisie du formulaire, il ne me calcule plus rien : le programme dit que les valeurs que j'ai saisies ne sont pas des nombres.

Pour le problème du champ total des cotisations du formulaire : il devrait par exemple obtenir un montant de 480
car :
3 000 * 2/100 = 60
2 000 * 21/100 = 420

Merci
Piere

**RomainVALERI** · 08/10/2011, 17h42

La fonction de test n'était peut-être pas tout-à-fait idéale... mais il me semble que le remplacement par typeof n'est pas meilleur

car les valeurs transmises sont des String provenant des input de la page, donc aucune ne sera de type numérique telle quelle. Ce qu'on veut tester, ce n'est pas si ce sont des nombres, mais si ce sont des chaines représentant des nombres... ^^

Code :

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

1
2
3
function testInt(value) {
return value === parseInt(value, 10).toString();
}

est tout-à-fait fonctionnel

**pierre_gomes** · 08/10/2011, 18h36

Merci pour ta réponse, je l'ai testée et cela fonctionne pour les 2 premières lignes mais j'ai toujours le problème du total qui ne fonctionne pas (mauvais calcul).

Merci encore pour tous ces efforts
Pierre

**RomainVALERI** · 08/10/2011, 19h56

Envoyé par pierre_gomes

J'ai inséré les modifications préconisées

Montre-nous l'état actuel de la page (son code) après les modifications suggérées (notamment l'accolade manquante et l'emplacement du script de la fonction somme)

**pierre_gomes** · 09/10/2011, 10h12

Ci-joint le code de la page et le script correspondant à la somme.
Pierre
Merci

**RomainVALERI** · 09/10/2011, 11h05

Ce n'est pas le calcul qui est mauvais, c'est que les valeurs de resultat et resultat_cg sont récupérés dans les variables value5 et value6 "trop tôt". Déplace les lignes qui récupèrent les valeurs en question juste avant leur mise à jour :

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
function somme() {
var total = document.getElementById('total_cotisations');
var result = document.getElementById('resultat');
var resultat = document.getElementById('resultat_cg');
var value1 = document.getElementById('base_at').value;
var value2 = (document.getElementById('at').value);
var value3 = document.getElementById('base_cg').value;
var value4 = document.getElementById('cg').value;
if (testInt(value1) && testInt(value2)) {
result.value = parseInt(value1) * parseInt(value2)/100;
} else {
alert('Les valeurs introduites ne sont pas des nombres');
}
if (testInt(value3) && testInt(value4)) {
resultat.value = parseInt(value3) * parseInt(value4)/100;
} else {
alert('Les valeurs introduites ne sont pas des nombres');
}
var value5 = document.getElementById('resultat_cg').value;
var value6= document.getElementById('resultat').value;
if (testInt(value5) && testInt(value6)) {
total.value = parseInt(value5) + parseInt(value6);
} else {
alert('Les valeurs introduites ne sont pas des nombres');
}
}