Discussion :

[VaSss]

Bonjour a tous,

Je vous expose mon problème :
Je doit développer une application web dans le cadre d'un projet et j'ai un petit problème de calcul de prix dynamique avec javascript.
A noter que mes quantités sont dans des balises select et que la liste du select est : "",1,2,3,4
Donc quand je sélectionne une quantité par exemple 4 tout va bien le total s'affiche dans ma page (dans une balise <td>) mais quand je change la valeur de cette même quantité par exemple 3 je voudrai que le calcul se fasse (que mon total passe a 3*le prix d'une entrée)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var total = 0; //variable global du prix total
// la fonction de calcul se déclenche par un onChange sur la balise select
function tarif(id){ 
	//variable du prix d'une entrée
	var prixE = Number(document.getElementById("prixEntree").innerHTML);
        //variable de la quantité sélectionnée
	var qte = Number(document.getElementById(id).value);
	if ( qte != ""){
	total += Number(prixE*qte);
	document.getElementById("total").innerHTML =total.toFixed(2);
}
}

J'espere que vous aurez compris mon problème sinon faites moi part de vos questions.

[andry.aime]

Bonjour,
Tu appelles la fonction dans le onchange du select.

A+.

[vermine]

Bonjour,

J'essaierai avec un "new" devant vos appels à Number:

Code :

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

1
2
 
= new Number(

[VaSss]

C'est ce que je fais, mon problème n'a pas de lien avec l'affichage ou autre problème technique, c'est un problème d'algorithmique, au changement de quantité d'une des listes <select> de ma page j'aimerai que le calcul s'effectue, le passage de la valeur 4 a la valeur 3 devrai soustraire une fois la valeur d'une entrée or ce n'est pas le cas.

pour information voici le code d'un de mes select :

Code :

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

1
2
3
4
5
6
7
8
9
10
<?php 
for($i=0;$i<count($tabEL);$i++){
echo "<select id=\"entreeL".$i."\"onChange=\"tarif(this.id)\"><option></option>
<option value=\"1\">1</option>
<option value=\"2\">2</option>
<option value=\"3\">3</option>
<option value=\"4\">4</option>
</select><br/>";
                                }
                        ?>

[SpaceFrog]

Code :

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

onchange=\"tarif(this.value)\"

serait plus direct non ?

[VaSss]

C'est sur, bien vu mais cela ne résout pas mon probleme de calcul de prix

[VaSss]

Oui j'ai vu, le new est implicite lorsqu'il n'est pas écrit, mais mon probleme ne viens pas de là.

mon problème par un exemple concret:

une entrée coute 0.37€
quand je choisis comme quantité 1 j'ai 0.37€ qui apparait dans mon champs dédié au résultat, cependant lorsque je change de quantité pour ce même champ et que je passe a une quantité de 2 par exemple, cela m'affiche 1.11€(0.37 + 0.37*2) au lieu de 0.74€

est-ce clair ?
je fais appel a vous pour me suggérer une modification de mon script qui permette de palier à ce problème, merci

[vermine]

Une variable quantité par <select> et la somme de toutes ces quantités pour obtenir le total ?

[SpaceFrog]

Code :

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

1
2
3
4
5
6
7
8
9
function tarif(id){ 
	//variable du prix d'une entrée
	var prixE = +document.getElementById("prixEntree").innerHTML;
        //variable de la quantité sélectionnée
	var qte = +document.getElementById(id).value;
	if ( qte != ""){
	total += Number(prixE*qte);
	document.getElementById("total").innerHTML =total.toFixed(2);
}

[VaSss]

Une variable quantité par <select> et la somme de toutes ces quantités pour obtenir le total ?

C'est une solution, cependant ma page contient 68 <select> car mon application concerne la saisie de quantités par des employées pour leur menu du midi (4 entrée par jours sur 4 jours donc 4 select par jour pour les entrée , de meme pour les plat de résistance, dessert , fromage ,legume .... donc 68 select sa risque de faire lourd)

[vermine]

Je vois.
Il faudrait trouver un moyen de récupérer l'ancienne valeur du <select>, de la multipliée par le prix du <select>, de la soustraire au total, puis d'ajouter le produit de la nouvelle valeur avec le prix du <select>.
Genre au onclick, sauvegarder la valeur dans une variable temporaire, à moins que le onchange sache récupérer son ancienne valeur ?

[VaSss]

Merci de la réponse,
voila ce que j'ai fais :

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
 
var total = 0;
var valPrec = 0;
function tarif(val){
 
	var prixE = document.getElementById("prixEntree").innerHTML;
	var qte = val;
	if ( qte != ""){
	valPrec = qte;
	total += Number(prixE*qte);
	document.getElementById("total").innerHTML =total.toFixed(2);
	valPrec = Number(document.getElementById(id).value);
	}
	else if ( qte == ""){
	total -= Number(prixE*valPrec);
	document.getElementById("total").innerHTML =total.toFixed(2);		
	}
}

la soustraction fonctionne lorsque je modifie les valeurs d'un <select>, cependant lorsque je passe sur un autre <select> en prenant une quantité différente et que je revien sur l'autre <select> et que je le modifie, les caxlculs sont érronés

[vermine]

Il faurait voir la tête de l'appel de cette fonction.
Et où est passé votre id ?

[VaSss]

l'appel de la fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?php
for($i=0;$i<count($tabEL);$i++){
echo "<select id=\"entreeL".$i."\" onChange=\"tarif(this.value)\">                                                                                      <option></option>
<option value=\"1\">1</option>
<option value=\"2\">2</option>
<option value=\"3\">3</option>
<option value=\"4\">4</option>
</select><br/>";
}
?>

mon id n'est plus d'actualité car je passe directement en paramètre la valeur du select plutôt que de passer l'id puis de récupérer la valeur en fonction de l'id

[vermine]

La logique ne me semble pas encore complète mais en attendant, il reste ceci dans le code:

Code :

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

1
2
 
valPrec = Number(document.getElementById(id).value);

A supprimer.

[VaSss]

Sinon pour en revenir à l'option que vous avez proposé de mettre une variable pour chaque <select>, j'ai du mal a imaginer la procédure a effectuer, auriez vous une idée de la manière de faire ?

[vermine]

Soit vous créez 68 variables globales (par une boucle, hein, pas fou le type) et vous avez une fonction qui les additionne toutes.
Soit vous ajoutez des onclick pour sauver l'ancienne valeur et soustraire ce qu'il faut.
Soit... il faut réfléchir. Je ne sais pas trop ce qu'il est le mieux.

[VaSss]

J'opte pour la solution des 68 variables globales, merci pour vos réponses en espérant que toutes ces variables ne ralentissent pas l'application !

[SpaceFrog]

sinon un boucle while sur

Code :

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

getElementById('entreeL'+i++)

[danielhagnoul]

Bonsoir.

68 variables ! C'est tout de même plus joli en jQuery :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		select {
			margin:12px;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
	<script>
		$(function(){
			$("[id^='entree']").change(function(){
				var total = 0;
 
				$("select[id^='entree']").each(function(i,item){
					total += parseFloat($(item).prev().text())*$(item).val();
				});
 
				$("#total").text(total.toFixed(2) + " €");
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="prixEntree1">0.30 €</div>
		<select id="entree1">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree2">0.30 €</div>
		<select id="entree2">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree3">0.30 €</div>
		<select id="entree3">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="total"></div>
	</div>
</body>  
</html>