Discussion :

[malaka44]

Bonjour

Je suis actuellement en train d'essayer de mettre au point un calculateur de devis avec javascript de la manière suivante : chaque produit a un équipement (et donc un prix) standard auquel peuvent s'ajouter différentes options sélectionnables avec des checkboxes. Le but de mon calculateur c'est de réactualiser le prix total et le nombre d'options sélectionnées à chaque fois qu'on clique sur une checkbox et malheureusement le mien ne prend pas en compte les changements précédents. Par exemple : prix de base = 50 000 euros. Option 1 = 1000 euros, Option 2 = 2000 euros. Si je clique sur l'option 1 le prix est réactualisé à 51 000 euros et si je clique ensuite sur l'option 2 il est réactualisé à 52 000 euros (au lieu des 53 000 euros attendus) et quand au nombre d'options sélectionnées, le programme s'obstine à ne pas les afficher ! Voilà le code :

1- html / PHP

Code :

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

1
2
 
<input type="checkbox" id="<?php echo ''.$reference.' - '.$i.''; ?>" value="<?php echo "$prix"; ?>" name="<?php echo "$reference"; ?>" onChange="calcultotal('<?php echo ''.$reference.' - '.$i.''; ?>', '<?php echo "$prix_standard"; ?>')" />

Je ne m'étendrai pas sur le reste du code car il fonctionne, et cette checkbox est reproduite autant de fois que nécessaire par une boucle en fonction du nombre d'options répertoriées dans la base de données. Le problème ici c'est le Javascript. Voici le code de la fonction calcultotal :

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
 
function calcultotal(id, prix_standard) {
 
	var option_prix = parseInt(document.getElementById(id).value);
	var prix_total = parseInt(prix_standard);
	var nombre_option = 0;
 
	if (document.getElementById(id).checked == true) {
		prix_total = (prix_total + option_prix);
		nombre_option++; 
		alert (prix_total + nombre_option);
	}
 
	else {
 
		prix_total = (prix_total - option_prix);
		nombre_option--;
		alert (prix_total + nombre_option);
	}
}

Les alert sont loin d'être esthétiques mais c'est juste pour la phase de test. Le résultat final sera affiché dans quelque chose comme cela et qui concluera la fonction, quand le reste marchera :

Code :

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

1
2
 
$("#total_ht").replaceWith('<div id="total_ht" ><p>Total HT : ' + prix_total + 'euros</p><p>Options choisies : ' + nombre_options +'</p></div>');

Je remercie par avance tous ceux qui pourraient m'aider

[iakou]

Bonjour.

Votre fonction de calcul doit être un "while" qui examine toutes les checkboxes du produit, et qui cumule qd 1 checkbox a été cochée.

Or vous avez écrit un "if else"...

Cdlt

PS : Vous auriez pu générer un "select" (liste déroulante) plutôt que des checkboxes !... (Javascript gérant les indices du select...)

[kaari kosaku]

Permet-moi de lire ton programme pour qu'on découvre ce qui ne va pas et te donner quelques conseils.

Code :

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

var option_prix = parseInt(document.getElementById(id).value);

Donc ici, tu identifie la checkbox sur laquelle tu as cliqué grâce à son id.
Lorsque tu appelle un évènement, tu peux passer en paramètre grâce au mot-clef this l'objet d'où tu as appelé la fonction, ici ta checkbox.
Donc, si tu n'a pas besoin d'utiliser un id spécifique pour chaque checkbox, tu peux supprimer les id, et utiliser this pour accéder à ta checkbox, sans avoir besoin de faire un getElementByXXX.

Code :

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

var prix_total = parseInt(prix_standard);

Le prix total est égal au ... prix standard ? J'écrirai plutôt :
var prix_standard = parseInt(prix_standard);

Et c'est là où on commence à voir le problème de ton programme. En effet, si tu initialise ici le prix total égal au prix standard, c'est que tu vas par la suite ajouter TOUTES les options cochées pour obtenir le prix total final non ?

Or dans ton code, tu ne tiens compte uniquement de la case qui vient d'être cochée et qui appelle la fonction, tu n'ajoute pas les autres options.

Pour calculer le prix total, j'entrevois 2 solutions :

1. La fonction calcule le prix total en parcourant toutes les cases que tu as cochées grâce à une boucle.
2. Tu crée une variable globale prixTotal, qui est initialisée au prix standard. Lorsque tu coche la case, ta fonction analyse si tu as coché ou décoché l'option en question, et ainsi ajoute ou retire le prix de l'option dans le prix total.

PS : Ton code est déjà conçu pour fonctionner comme la 2ème solution, en faisant uniquement 2 modifications, tu règlerais ton problème :

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
 
var prix_total = prix_standard;
var nombre_option = 0;
 
function calcultotal(id) {
 
	var option_prix = parseInt(document.getElementById(id).value);
 
	if (document.getElementById(id).checked == true) {
		prix_total = (prix_total + option_prix);
		nombre_option++; 
		alert (prix_total + nombre_option);
	}
 
	else {
 
		prix_total = (prix_total - option_prix);
		nombre_option--;
		alert (prix_total + nombre_option);
	}
}

Pense à ce que je t'ai dis à propos du this

[malaka44]

@iakou : Merci beaucoup pour le conseil, c'est sans doute ce qui cloche. Je vais essayer avec une boucle. Par contre je ne peux pas utiliser de Select pour une bonne raison : les checkbox sont incluses dans des tableaux où figurent la référence de l'option, un texte de description, le prix et une image.

@kaari kosaku : Je vous remercie également. Au risque de raconter n'importe quoi (je suis complètement novice en javascript / JQuery et plutôt débutant en programmation) mes checkbox n'ont pas une id fixe. J'avais essayé de le faire au départ mais le calculateur prenait en compte uniquement les données de la première option (peu importe laquelle je cochais) donc j'ai dû ajouter une variable d'auto incrémentation à l'id pour contourner ce problème.

" Et c'est là où on commence à voir le problème de ton programme. En effet, si tu initialise ici le prix total égal au prix standard, c'est que tu vas par la suite ajouter TOUTES les options cochées pour obtenir le prix total final non ? "

C'est l'idée de départ. Et que chaque fois que je sélectionne une checkbox, la fonction réinitialise le prix afin d'ajouter le prix des options cochées (ou soustraire celui des options décochées) au total calculé au précédent changement.

Sinon j'ai réglé le problème de l'affichage du nombre d'options sélectionnées, celui-là passe comme il faut maintenant.

Merci à vous, je vais continuer à travailler dessus en espérant qu'il finisse par fonctionner

[kaari kosaku]

J'avais essayé de le faire au départ mais le calculateur prenait en compte uniquement les données de la première option (peu importe laquelle je cochais) donc j'ai dû ajouter une variable d'auto incrémentation à l'id pour contourner ce problème.

Par convention il ne peut/doit y avoir qu'un seul élément par id, à l'inverse des class, tu as été témoin de ce qu'il se passe lorsque ce n'est pas le cas .

Sinon, je n'ai pas tenu compte du php dans ton code, et pour moi en tout cas, le fait qu'une élément soit statique (au contraire de dynamique), est complètement indépendant du code php, c'est propre au javascript.
Ton code php est interprété par le serveur, puis celui-ci renvoie, dans notre cas, une page html avec du code javascript, or aucune autre information n'est renvoyée par le serveur pendant l'affichage de ta page par ton navigateur (en mettant de côté Ajax), ainsi c'est uniquement javascript qui permet de donner une "dynamicité".
J'espère pas trop embrouiller .

En fait, si je dis tout ça c'est surtout pour le fait que je trouve aberrant d'utiliser un id (donc différent) pour chaque option.
A la validation de ce formulaire, les réponses au formulaire que tu devra traiter seront stockées dans un tableau['nom'] = valeur

Ainsi il existe déjà le nom qui permet (ou qui devrait) être unique pour chacune des options, tu n'as pas besoin d'un id en plus.

Or, si tu cherche à parcourir toutes tes options grâce à un code javacsript, ce que tu recherche ce n'est pas ce qui distingue ces options, c'est ce qu'elles ont en commun.
C'est pourquoi, personnellement, j'utiliserais une class si j'avais besoin de facilement repérer toutes les options. Comme class="option".
Depuis javascript pour faire le total de toutes mes options j'aurais donc besoin de faire :

Code :

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

1
2
3
4
5
6
7
totalOption = 0;
optElts = document.getElementsByClassName('option'); //Récupère tous les éléments dont le nom de la classe est 'option'
for (var i=0; i < optElts.length; i++)
{
    if (optElts.checked)
        totalOption += optElts[i].value
}

[malaka44]

Je viens de régler le problème en ajoutant une variable supplémentaire et en passant certains variables en global. Je garde quand même en mémoire ce que vous m'avez proposé dans votre dernier message afin d'améliorer ce calculateur ultérieurement. Voilà mon code final :

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
 
 
var nombre_option = 0;
var total_option = 0;
var prix_total = 0;
 
function calcultotal(id, prix_standard) {
 
        var option_prix = parseInt(document.getElementById(id).value);
        var prix_standard = parseInt(prix_standard);
 
	if (document.getElementById(id).checked == true) {
 
		total_option = (total_option + option_prix);
		prix_total = (prix_standard + total_option);
		nombre_option++; 
		alert (prix_total);
	}
 
	else {
 
		total_option = (total_option - option_prix);
		prix_total = (prix_standard + total_option);
		nombre_option--;
		alert (prix_total);
	}
}

Encore merci à vous pour votre aide qui m'a aiguillé dans la bonne direction (j'ai essayé aussi les boucles mais la première des deux options ayant donné un résultat c'était celle des variables globales)