Calcul dynamique à partir de quantités <select>

Version imprimable

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:

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.

26/04/2010, 10h20
andry.aime

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

A+.
26/04/2010, 10h24
vermine
Bonjour,

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

1 2 = new Number(

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:

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/>"; } ?>

26/04/2010, 10h42
SpaceFrog

Code:

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

serait plus direct non ?
26/04/2010, 10h44
VaSss

C'est sur, bien vu mais cela ne résout pas mon probleme de calcul de prix ;)
26/04/2010, 11h05
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
26/04/2010, 11h19
vermine

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

Code:

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);
}

26/04/2010, 11h27
VaSss

Citation:

Envoyé par vermine

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)
26/04/2010, 11h33
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 ?

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

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

26/04/2010, 11h48
vermine

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

l'appel de la fonction :
Code:

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

26/04/2010, 12h01
vermine
La logique ne me semble pas encore complète mais en attendant, il reste ceci dans le code:
Code:

1 2 valPrec = Number(document.getElementById(id).value);
A supprimer.
26/04/2010, 13h05
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 ?
26/04/2010, 13h31
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.
26/04/2010, 13h54
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 ! ;)
26/04/2010, 13h59
SpaceFrog

sinon un boucle while sur

Code:

getElementById('entreeL'+i++)

Bonsoir.

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

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
<!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>