Creer un configurateur avec des prix

**SpaceFrog** · 05/06/2007, 10h39

en utilisant mon script ...
c'est exactement ce qu'il fait !!!!

il prend un a un les fieldsets...
chaque rubrique est un fieldset
dans le fieldset il scanne les radios pour recupérer celui qui est coché ...
il en recupère la valeur pour la concaténer dasn une variable Total ...

**jojo57** · 05/06/2007, 10h44

Ok je te remercie énormement pour le temps que tu consacre à mon problème je vais tester la et je te tient au courant

**jojo57** · 05/06/2007, 10h54

J'ai utlisé ta fonction, jai modifié ma page comme tu me la proposer pour que ta fonction fonctionne correctment mais jai un ptit problème, quand je clique sur un produit, il devient bie nrouge mais dans le total en bah il ya écrit
Nan €

**SpaceFrog** · 05/06/2007, 11h09

tu utilises bien Number() ???

comment et ou additionnes tu les valeurs ?

Un bout de code serait le bienvenu

**jojo57** · 05/06/2007, 11h15

bah vant pour additionner les valeurs je faisais comme ca

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
function option(produit)
{
	//On récupère le nom de la case à cocher.
	nom = produit.name;
	//On récupère le numéro de la case à cocher en supprimant de la chaine la chaine "produit".
	num = nom.replace("produit","");
	//On récupère la valeur du champ correspondant au prix de la case à cocher (de l'option choisie).
	var t = document.getElementsByName("prix"+num);
	//On récupère la valeur en entier du prix correspondant à la case à cocher.
	var argent = enleveEuroEspace(t[0].value);
	//On récupère le signe euro qui se trouve en fin de champ du prix correspondant à la case à cocher.
	var euro = t[0].value.substring(t[0].value.length-2,t[0].value.length);
	//On récupère la valeur en entier du champ total de la page.
	var total = enleveEuroEspace(document.OptionsSelection.Total.value);
	//Si la case à cocher concernée est cocher...
 
	if (produit.checked==true)
	{
 
		//On ajoute le total et la valeur du prix correspondant à la cose à cocher (et rajoute l'espace et le sigle euro avec la fonction metEuroEspace).
		document.OptionsSelection.Total.value=metEuroEspace(total+argent,euro);
	}
	//Sinon...
	else
	{
		//On soustrait le total et la valeur du prix correspondant à la cose à cocher (et rajoute l'espace et le sigle euro avec la fonction metEuroEspace).
		document.OptionsSelection.Total.value=metEuroEspace(total-argent,euro);
	}
 
}

Je recupere le produit, le prix qui lui est associé puis lorsque une case etait coché bah jadditionné le prix récuperer au montant total mais maintenant avec ta fonction je ne sais pas comment récuperer le prix ni l'additionner...

Je peut réutiliser ma fonction?

**SpaceFrog** · 05/06/2007, 11h21

à priori tu n'as rien compris à ce que je t'ai expliqué précédemment ...

le prix est dans la value du radio
en testant le checked du radio si il est true j'incrémente la variable total avec le value du radio
à la fin de la boulce sur tous les fieldset la variable total contitne le total

pas besoin de parser quoi que ce soit ...

**jojo57** · 05/06/2007, 11h24

bah dans ce cas si le total est incrémenter par la value du prix, comment ca se fait que dans le total je n'ai aucun prix?

Désolé je débute

au moin tu est patient et tu m'aide

**SpaceFrog** · 05/06/2007, 11h26

je ne vois aucune boucle dans ton code ???
tu peux peut être nous remettre l'intégralité de ton code ce sera plus clair ..

**jojo57** · 05/06/2007, 11h32

donc voici mon code au grand complet

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
function option(ObjRadio){
var Total=0
 var TabRubrique=document.getElementsByTagName('fieldset')
 
 for(i=0;i<TabRubrique.length;i++){
 	 	var TabInputs= TabRubrique[i].getElementsByTagName('input')
 	  	var TabRadios=new Array();
 	 	for(k=0;k<TabInputs.length;k++){
 	 			if (TabInputs[k].type=='radio')
				{
					TabRadios.push(TabInputs[k])
				}
 	 	}
 
 		for(j=0;j<TabRadios.length;j++){
 				var reflabel='lbl'+TabRadios[j].id;
 
		    	if (TabRadios[j].checked==true ){ Total+=Number(TabRadios[j].value);
		    	                            document.getElementById(reflabel).style.color='red';
		    	                            document.getElementById(reflabel).style.fontWeight='bold';
		    	                            }
		    	else{                       document.getElementById(reflabel).style.color='black';
		    	                            document.getElementById(reflabel).style.fontWeight='normal';
		    	                            }    		    	                            
		    	    }   
		    	}
document.getElementById('Total').value=Total + " €"
 
}
 
 
//function option(produit)
{
	//On récupère le nom de la case à cocher.
	//nom = produit.id;
	//On récupère le numéro de la case à cocher en supprimant de la chaine la chaine "produit".
	//num = nom.replace("produit","");
	//On récupère la valeur du champ correspondant au prix de la case à cocher (de l'option choisie).
	//var t = document.getElementsByName("prix"+num);
	//On récupère la valeur en entier du prix correspondant à la case à cocher.
	//var argent = enleveEuroEspace(t[0].value);
	//On récupère le signe euro qui se trouve en fin de champ du prix correspondant à la case à cocher.
	//var euro = t[0].value.substring(t[0].value.length-2,t[0].value.length);
	//On récupère la valeur en entier du champ total de la page.
	//var total = enleveEuroEspace(document.OptionsSelection.Total.value);
	//Si la case à cocher concernée est cocher...
 
	//if (produit.checked==true)
	{
		//On ajoute le total et la valeur du prix correspondant à la cose à cocher (et rajoute l'espace et le sigle euro avec la fonction metEuroEspace).
		//document.OptionsSelection.Total.value=metEuroEspace(total+argent,euro);
	}
	//Sinon...
	//else
	{
		//On soustrait le total et la valeur du prix correspondant à la cose à cocher (et rajoute l'espace et le sigle euro avec la fonction metEuroEspace).
	//	document.OptionsSelection.Total.value=metEuroEspace(total-argent,euro);
	}
 
}
 
/**Fonction permettant d'enlever le signe Euro et les espaces dans la chaine argent.*/
function enleveEuroEspace(argent)
{
	//On enlève d'abord tous les espaces.
	argent = argent.replace(" ","");
	//On enlève le dernier caractère qui est forcément le sigle euro.
	argent =argent.substring(0,argent.length-1);
	//On renvoi le reste convertit en float(pour les prix contenant une ",").
	return parseFloat(argent);
}
/**Fonction permettant de remettre le signe Euro et les espaces dans la chaine argent.*/
function metEuroEspace(argent,euro)
{
	//On attache le signe euro à la fin de la variable argent.
	argent = argent.toString()+euro;
	return argent;
}
</script>
 
 
<html>
<head>
<title>Cr&eacute;ation du kit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body onload="option()">
<form method="post" action="" style="height: 493px" name="OptionsSelection">
<?php
 
if  (empty($groupe))
{
	echo "Nous ne disposons actuellement d'aucune offre de kit concernant la race : <b>$nom_race</b>";
}
else
{
 	while($rowrecuprubriqueKit = mysql_fetch_array($reqrecuprubriqueKit))
 	{
		$nomrubrique=$rowrecuprubriqueKit['nom_rubriqueKit'];
		echo "<b>".$rowrecuprubriqueKit['nom_rubriqueKit']."</b>";
		echo "<fieldset id='$nomrubrique' >";
 
		//on met à jour la requête qui recupére les produits en ajoutant un filtre sur la rubriqueKit
		$sqlrecupproduitrubriqueKit = $sqlrecupproduit." AND relpr.id_rubriquekit=".$rowrecuprubriqueKit['id_rubriqueKit'];
 
		$reqrecupproduitrubriqueKit = mysql_query($sqlrecupproduitrubriqueKit) or die('Erreur SQL !');
 
		while($rowrecupproduitrubriqueKit = mysql_fetch_array($reqrecupproduitrubriqueKit))
 		{
			$idproduit="produit".$rowrecupproduitrubriqueKit['id_produit'];
			$idrubrique="rubrique".$rowrecupproduitrubriqueKit['id_rubriqueKit'];
			$idprix="prix".$rowrecupproduitrubriqueKit['id_produit'];
			$lblproduit="lbl".$idproduit;
			$prix=$rowrecupproduitrubriqueKit['prix'];
			if ($rowrecupproduitrubriqueKit['produit_defaut']==1)
			{	
				echo "<b><font color='#FF0000'><input type='radio' value='true' id='$idproduit' name='$idrubrique' checked='checked' onclick='setTimeout(function(){option()},100);' />
				<label id='$lblproduit' for='$idproduit'>".$rowrecupproduitrubriqueKit['nom']."</label>
				<input size='6' id='$idprix' name='$idprix' type='text' onFocus='javascript: this.blur()' value='$prix'/></font></b> ";
    			echo " <br style='clear:both;'/>";		
				//le prix total par défaut à l'ouverture de la page est calculé en additionnant le prix de chaque produits par défaut		
			}
			else
			{
 
				echo "<input type='radio' value='true' id='$idproduit' name='$idrubrique' onclick='setTimeout(function(){option()},100);' />
				<label id='$lblproduit' for='$idproduit'>".$rowrecupproduitrubriqueKit['nom']."</label>
				<input size='6' id='$idprix' name='$idprix' type='text' onFocus='javascript: this.blur()' value='$prix'/> ";
				echo " <br style='clear:both;'/>";
			}
		}
		echo "</fieldset >";
		echo "<br /><br />";
	}
		echo "<b>Total : </b><input size='8' id='Total' name='Total' onFocus='javascript: this.blur()' type='text' value=''/>";
 
}
?>
 
</form>

**SpaceFrog** · 05/06/2007, 12h07

Heu le script dans le head de préférence ...

ensuite mets Total en variable globale
ça te permettra de l'utiliser dans les autres fonction sans essyer de recalculer
lance la focntion option dans le onlaod et laisse tomber ton calcul du total coté php ...

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
 
var Total
 
function option(){
 
Total=0
 var TabRubrique=document.getElementsByTagName('fieldset')
 
 for(i=0;i<TabRubrique.length;i++){
 	 	var TabInputs= TabRubrique[i].getElementsByTagName('input')
 	  	var TabRadios=new Array();
 	 	for(k=0;k<TabInputs.length;k++){
 	 			if (TabInputs[k].type=='radio')
				{
					TabRadios.push(TabInputs[k])
				}
 	 	}
 
 		for(j=0;j<TabRadios.length;j++){
 				var reflabel='lbl'+TabRadios[j].id;
 
		    	if (TabRadios[j].checked==true ){ Total+=Number(TabRadios[j].value);
		    	                            document.getElementById(reflabel).style.color='red';
		    	                            document.getElementById(reflabel).style.fontWeight='bold';
		    	                            }
		    	else{                       document.getElementById(reflabel).style.color='black';
		    	                            document.getElementById(reflabel).style.fontWeight='normal';
		    	                            }    		    	                            
		    	    }   
		    	}
document.getElementById('Total').value=Total + " €"
 
}

**jojo57** · 05/06/2007, 12h15

Jai changé de place le script, jexecute deja la function dans le body et j'ai viré le calcul du total dans le php.

Mais la fonction ne récupére toujours pas le prix, quand je fais un alert il me recupére NaN et dans le total il maffiche NaN €

**SpaceFrog** · 05/06/2007, 12h42

tu pourrais me mettre le html généré ?

**jojo57** · 05/06/2007, 12h46

Bien sur je te le met a 2h quand jy retourne.

Et encore une fois merci de ta patience et de ton aide

**jojo57** · 05/06/2007, 14h03

Voici le html généré

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
<html>
<head>
 
 
<script language="Javascript">
 
/**Fonction permettant en fonction de la case à cocher de récupèrer le prix correspondant, mettre à jour le total.*/
 
var Total
var TotalReduc1
var TotalReduc2
 
function option(ObjRadio)
{
	var Total=0
	var TotalReduc1=0
	var TotalReduc2=0
 
	var TabRubrique=document.getElementsByTagName('fieldset')
 
	for(i=0;i<TabRubrique.length;i++)
	{
 	 	var TabInputs= TabRubrique[i].getElementsByTagName('input')
 	  	var TabRadios=new Array();
 	 	for(k=0;k<TabInputs.length;k++){
 	 			if (TabInputs[k].type=='radio')
				{
					TabRadios.push(TabInputs[k])
				}
 	 	}
 
 		for(j=0;j<TabRadios.length;j++)
		{
 				var reflabel='lbl'+TabRadios[j].id;
 
		    	if (TabRadios[j].checked==true )
				{ 
					Total+=Number(TabRadios[j].value);
					Total+=Number(TabRadios[j].value);
					Total+=Number(TabRadios[j].value);
		    	    document.getElementById(reflabel).style.color='red';
		    	    document.getElementById(reflabel).style.fontWeight='bold';
		    	}
		    	else
				{                       
					document.getElementById(reflabel).style.color='black';
		    		document.getElementById(reflabel).style.fontWeight='normal';
		    	}    		    	                            
		}   
}
 
document.getElementById('Total').value=Total + " €"
document.getElementById('TotalReduc1').value=Total + " €"
document.getElementById('TotalReduc2').value=Total + " €"
 
}
 
 
//function option(produit)
{
	//On récupère le nom de la case à cocher.
	//nom = produit.id;
	//On récupère le numéro de la case à cocher en supprimant de la chaine la chaine "produit".
	//num = nom.replace("produit","");
	//On récupère la valeur du champ correspondant au prix de la case à cocher (de l'option choisie).
	//var t = document.getElementsByName("prix"+num);
	//On récupère la valeur en entier du prix correspondant à la case à cocher.
	//var argent = enleveEuroEspace(t[0].value);
	//On récupère le signe euro qui se trouve en fin de champ du prix correspondant à la case à cocher.
	//var euro = t[0].value.substring(t[0].value.length-2,t[0].value.length);
	//On récupère la valeur en entier du champ total de la page.
	//var total = enleveEuroEspace(document.OptionsSelection.Total.value);
	//Si la case à cocher concernée est cocher...
 
	//if (produit.checked==true)
	{
		//On ajoute le total et la valeur du prix correspondant à la cose à cocher (et rajoute l'espace et le sigle euro avec la fonction metEuroEspace).
		//document.OptionsSelection.Total.value=metEuroEspace(total+argent,euro);
	}
	//Sinon...
	//else
	{
		//On soustrait le total et la valeur du prix correspondant à la cose à cocher (et rajoute l'espace et le sigle euro avec la fonction metEuroEspace).
	//	document.OptionsSelection.Total.value=metEuroEspace(total-argent,euro);
	}
 
}
 
/**Fonction permettant d'enlever le signe Euro et les espaces dans la chaine argent.*/
function enleveEuroEspace(argent)
{
	//On enlève d'abord tous les espaces.
	argent = argent.replace(" ","");
	//On enlève le dernier caractère qui est forcément le sigle euro.
	argent =argent.substring(0,argent.length-1);
	//On renvoi le reste convertit en float(pour les prix contenant une ",").
	return parseFloat(argent);
}
/**Fonction permettant de remettre le signe Euro et les espaces dans la chaine argent.*/
function metEuroEspace(argent,euro)
{
	//On attache le signe euro à la fin de la variable argent.
	argent = argent.toString()+euro;
	return argent;
}
</script>
 
 
 
 
 
<title>Cr&eacute;ation du kit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body onload="option()">
<form method="post" action="" style="height: 493px" name="OptionsSelection">
<b>Collier&Laisse</b><fieldset id='Collier&Laisse' ><input type='radio' value='true' id='produit94' name='rubrique1' onclick='setTimeout(function(){option()},100);' />
				<label id='lblproduit94' for='produit94'>Kit chiot nylon</label>
				<input size='6' id='prix94' name='prix94' type='text' onFocus='javascript: this.blur()' value='16 €'/>  <br style='clear:both;'/><input type='radio' value='true' id='produit95' name='rubrique1' checked='checked' onclick='setTimeout(function(){option()},100);' />
				<label id='lblproduit95' for='produit95' style='color:red; font-weight:bold;'>Kit chiot cuir</label>
				<input size='6' id='prix95' name='prix95' type='text' onFocus='javascript: this.blur()' value='18 €'/>  <br style='clear:both;'/></fieldset ><br /><br /><b>Croquettes</b><fieldset id='Croquettes' ><input type='radio' value='true' id='produit11054' name='rubrique2' checked='checked' onclick='setTimeout(function(){option()},100);' />
				<label id='lblproduit11054' for='produit11054' style='color:red; font-weight:bold;'>Nutram chiot - Sac de 15 Kg</label>
				<input size='6' id='prix11054' name='prix11054' type='text' onFocus='javascript: this.blur()' value='62 €'/>  <br style='clear:both;'/><input type='radio' value='true' id='produit111000100' name='rubrique2' onclick='setTimeout(function(){option()},100);' />
				<label id='lblproduit111000100' for='produit111000100'>Brit chiot - Sac de 15 KG</label>
				<input size='6' id='prix111000100' name='prix111000100' type='text' onFocus='javascript: this.blur()' value='52 €'/>  <br style='clear:both;'/><input type='radio' value='true' id='produit11202300' name='rubrique2' onclick='setTimeout(function(){option()},100);' />
				<label id='lblproduit11202300' for='produit11202300'>Royal Canin Junior Maxi<br>Sac 15 kg</label>
				<input size='6' id='prix11202300' name='prix11202300' type='text' onFocus='javascript: this.blur()' value='65.9 €'/>  <br style='clear:both;'/><input type='radio' value='true' id='produit11300200' name='rubrique2' onclick='setTimeout(function(){option()},100);' />
				<label id='lblproduit11300200' for='produit11300200'>Pro Plan chiot Agneau - Sac de 15 Kg</label>
				<input size='6' id='prix11300200' name='prix11300200' type='text' onFocus='javascript: this.blur()' value='69.9 €'/>  <br style='clear:both;'/></fieldset ><br /><br /><b>Couchage</b><fieldset id='Couchage' ><input type='radio' value='true' id='produit335500800' name='rubrique3' onclick='setTimeout(function(){option()},100);' />
				<label id='lblproduit335500800' for='produit335500800'>Corbeille Tenero Taille L</label>
				<input size='6' id='prix335500800' name='prix335500800' type='text' onFocus='javascript: this.blur()' value='65 €'/>  <br style='clear:both;'/><input type='radio' value='true' id='produit335501250' name='rubrique3' checked='checked' onclick='setTimeout(function(){option()},100);' />
				<label id='lblproduit335501250' for='produit335501250' style='color:red; font-weight:bold;'>Doggielounge Large - Camouflage</label>
				<input size='6' id='prix335501250' name='prix335501250' type='text' onFocus='javascript: this.blur()' value='119 €'/>  <br style='clear:both;'/></fieldset ><br /><br /><b>Gamelle</b><fieldset id='Gamelle' ><input type='radio' value='true' id='produit51' name='rubrique4' onclick='setTimeout(function(){option()},100);' />
				<label id='lblproduit51' for='produit51'>Lot de 2 gamelles inox classiques</label>
				<input size='6' id='prix51' name='prix51' type='text' onFocus='javascript: this.blur()' value='15 €'/>  <br style='clear:both;'/><input type='radio' value='true' id='produit50' name='rubrique4' checked='checked' onclick='setTimeout(function(){option()},100);' />
				<label id='lblproduit50' for='produit50' style='color:red; font-weight:bold;'>Lot de 2 gamelles inox antidérapantes, 2.8 L.</label>
				<input size='6' id='prix50' name='prix50' type='text' onFocus='javascript: this.blur()' value='25 €'/>  <br style='clear:both;'/><input type='radio' value='true' id='produit52' name='rubrique4' onclick='setTimeout(function(){option()},100);' />
				<label id='lblproduit52' for='produit52'>Lot de 2 gamelles + porte gamelle</label>
				<input size='6' id='prix52' name='prix52' type='text' onFocus='javascript: this.blur()' value='45 €'/>  <br style='clear:both;'/></fieldset ><br /><br /><b>Total : </b><input size='8' id='Total' name='Total' onFocus='javascript: this.blur()' type='text' value=''/><br /><br /><b>Total Après réduction : </b><input size='8' id='TotalReduc1' name='TotalReduc1' onFocus='javascript: this.blur()' type='text' value=''/><br /><br /><b>Total Après réduction suivant le nombre d'articles : </b><input size='8' id='TotalReduc2' name='TotalReduc2' onFocus='javascript: this.blur()' type='text' value=''/>
</form>
 
 
</body>
</html>

**jojo57** · 05/06/2007, 14h29

C'est bizarre parce que la value du total est vide dans le html généré...

Il doit pas récupérer les prix correctement mais je voit pas pourquoi il ne les récupéres pas correctement

**SpaceFrog** · 05/06/2007, 14h31

Il me semblait pourtant avoir précisé d'utiliser les value des radios ...

pas

Code :

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

value='true'

mais mettre le prix dans la value !!!

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<html>
<head>
 
 
<script type='text/javascript'>
 
/**Fonction permettant en fonction de la case à cocher de récupèrer le prix correspondant, mettre à jour le total.*/
 
var Total
var TotalReduc1
var TotalReduc2
 
function option()
{
Total=0
TotalReduc1=0
TotalReduc2=0
 
	var TabRubrique=document.getElementsByTagName('fieldset')
 	for(i=0;i<TabRubrique.length;i++)
	{
 	 	var TabInputs= TabRubrique[i].getElementsByTagName('input')
 	  	var TabRadios=new Array();
 	 	for(k=0;k<TabInputs.length;k++){
 	 			if (TabInputs[k].type=='radio'){
							TabRadios.push(TabInputs[k])
							}
 
 	 	}
 
 		for(j=0;j<TabRadios.length;j++)
		{
 				var reflabel='lbl'+TabRadios[j].id;
 
		    	if (TabRadios[j].checked==true )
				{ 
				 	Total+=Number(TabRadios[j].value);
					document.getElementById(reflabel).style.color='red';
		    	    document.getElementById(reflabel).style.fontWeight='bold';
		    	}
		    	else
				{                       
					document.getElementById(reflabel).style.color='black';
		    		document.getElementById(reflabel).style.fontWeight='normal';
		    	}    		    	                            
		}   
}
 
document.getElementById('Total').value=Total + " €"
document.getElementById('TotalReduc1').value=Total + " €"
document.getElementById('TotalReduc2').value=Total + " €"
 
}
 
 
 
</script>
 
 
 
<style type='text/css'>
fieldset {width:75%;}
input {float:left;}
label {float:left;}
.right {float:right;}
fieldset{boder:0px;}
</style> 
 
<title>Cr&eacute;ation du kit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body onload="option()">
<form method="post" action="" style="height: 493px" name="OptionsSelection">
 
<fieldset id='Collier&Laisse' >
	<b>Collier&Laisse</b><br />
	<input type='radio' value='16' id='produit94' name='rubrique1' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit94' for='produit94'>Kit chiot nylon</label>
	<input size='6'   class='right' id='prix94' name='prix94' type='text' onFocus='javascript: this.blur()' value='16 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='18' id='produit95' name='rubrique1' checked='checked' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit95' for='produit95' style='color:red; font-weight:bold;'>Kit chiot cuir</label>
	<input size='6'  class="right" id='prix95' name='prix95' type='text' onFocus='javascript: this.blur()' value='18 €'/>
	<br style='clear:both;'/>
</fieldset >
 
<br /><br />
<fieldset id='Croquettes' >
	<b>Croquettes</b><br />
	<input type='radio' value='62' id='produit11054' name='rubrique2' checked='checked' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit11054' for='produit11054' style='color:red; font-weight:bold;'>Nutram chiot - Sac de 15 Kg</label>
	<input size='6'  class="right" id='prix11054' name='prix11054' type='text' onFocus='javascript: this.blur()' value='62 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='52' id='produit111000100' name='rubrique2' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit111000100' for='produit111000100'>Brit chiot - Sac de 15 KG</label>
	<input size='6'  class="right" id='prix111000100' name='prix111000100' type='text' onFocus='javascript: this.blur()' value='52 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='65.9' id='produit11202300' name='rubrique2' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit11202300' for='produit11202300'>Royal Canin Junior Maxi<br>Sac 15 kg</label>
	<input size='6'  class="right" id='prix11202300' name='prix11202300' type='text' onFocus='javascript: this.blur()' value='65.9 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='69.9' id='produit11300200' name='rubrique2' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit11300200' for='produit11300200'>Pro Plan chiot Agneau - Sac de 15 Kg</label>
	<input size='6'  class="right" id='prix11300200' name='prix11300200' type='text' onFocus='javascript: this.blur()' value='69.9 €'/>
	<br style='clear:both;'/>
</fieldset >
<br /><br />
<fieldset id='Couchage' >
	<b>Couchage</b><br />
	<input type='radio' value='65' id='produit335500800' name='rubrique3' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit335500800' for='produit335500800'>Corbeille Tenero Taille L</label>
	<input size='6'  class="right" id='prix335500800' name='prix335500800' type='text' onFocus='javascript: this.blur()' value='65 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='119' id='produit335501250' name='rubrique3' checked='checked' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit335501250' for='produit335501250' style='color:red; font-weight:bold;'>Doggielounge Large - Camouflage</label>
	<input size='6'  class="right" id='prix335501250' name='prix335501250' type='text' onFocus='javascript: this.blur()' value='119 €'/>
	<br style='clear:both;'/>
</fieldset >
<br /><br />
<fieldset id='Gamelle' >
	<b>Gamelle</b><br />
	<input type='radio' value='15' id='produit51' name='rubrique4' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit51' for='produit51'>Lot de 2 gamelles inox classiques</label>
	<input size='6'  class="right" id='prix51' name='prix51' type='text' onFocus='javascript: this.blur()' value='15 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='25' id='produit50' name='rubrique4' checked='checked' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit50' for='produit50' style='color:red; font-weight:bold;'>Lot de 2 gamelles inox antidérapantes, 2.8 L.</label>
	<input size='6'  class="right" id='prix50' name='prix50' type='text' onFocus='javascript: this.blur()' value='25 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='45' id='produit52' name='rubrique4' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit52' for='produit52'>Lot de 2 gamelles + porte gamelle</label>
	<input size='6'  class="right" id='prix52' name='prix52' type='text' onFocus='javascript: this.blur()' value='45 €'/>
	<br style='clear:both;'/>
</fieldset >
<br /><br />
 
	<b>Total : </b><input size='8' id='Total' name='Total' onFocus='javascript: this.blur()' type='text' value=''/>
	<br /><br />
	<b>Total Après réduction : </b>
	<input size='8' id='TotalReduc1' name='TotalReduc1' onFocus='javascript: this.blur()' type='text' value=''/>
	<br /><br />
	<b>Total Après réduction suivant le nombre d'articles : </b>
	<input size='8' id='TotalReduc2' name='TotalReduc2' onFocus='javascript: this.blur()' type='text' value=''/>
</form>
 
 
</body>
</html>

ensuite pourquoi ajouter trois fois le prix dasn le total ??? une seul fois suffit ...
ensuiite pour les réduction... partir du total et lui appliquer la reduc ...

**jojo57** · 05/06/2007, 14h38

Trop fort ca marche j'avais pas compris que tu parlait des values dans le html

Tinkiéte pas je ne vais pas ajouter 3 fois le prix dans le total, il s'agit seulement d'un test, j'ai mis ces valeurs en attendant.
Je vais faire comme ca pour les réduction les totaux n'auront jamais la même valeur...

Par contre pour pouvoir appliquer une réduction, je vais faire une condition, si 1 produit acheter alors total=total - 2, si 2 produits alors total = total -3...

Je vais rajouter pour chaque catégorie un radio bouton aucun avec 0 comme prix.

Saurais tu comment faire pour récuperer le nombre de produit coché et dont le prix n'est pas 0?

**SpaceFrog** · 05/06/2007, 15h04

heu ben là tel que c'est avec des boutons radio tu forces à acheter au moins un produit dans chaque rubrique ??

**jojo57** · 05/06/2007, 15h10

Ouai excuse jai oublié de préciser, je vient de rajouter dans la base pour chaque produit un produit 'Aucun' qui vaut 0€ comme ca tout fonctionne avec la fonction.

Maintenant jaimerais pouvoir récuperer le nombre de case coché dont le prix est different de 0 ou alors dont le nom est different de 'Aucun'
Comme ca je pourrai affecter une reduction o prix total suivant le nombre d'articles commandés.

Ps: je viens de remarquer que jai un beug, quand je coche le Aucun de la derniére rubrique, le aucun de la premiere rubrique devient rouge

faut que j'aille voir ca de plus prés lol

**SpaceFrog** · 05/06/2007, 15h29

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<html>
<head>
 
 
<script type='text/javascript'>
 
/**Fonction permettant en fonction de la case à cocher de récupèrer le prix correspondant, mettre à jour le total.*/
 
var Total
var NbArticles
var TotalReduc1
var TotalReduc2
 
function option()
{
NbArticles=0
Total=0
TotalReduc1=0
TotalReduc2=0
 
	var TabRubrique=document.getElementsByTagName('fieldset')
 	for(i=0;i<TabRubrique.length;i++)
	{
 	 	var TabInputs= TabRubrique[i].getElementsByTagName('input')
 	  	var TabRadios=new Array();
 	 	for(k=0;k<TabInputs.length;k++){
 	 			if (TabInputs[k].type=='radio'){
							TabRadios.push(TabInputs[k])
							}
 
 	 	}
 
 		for(j=0;j<TabRadios.length;j++)
		{
 				var reflabel='lbl'+TabRadios[j].id;
 
		    	if (TabRadios[j].checked==true )
				{  NbArticles++
				 	Total+=Number(TabRadios[j].value);
					document.getElementById(reflabel).style.color='red';
		    	    document.getElementById(reflabel).style.fontWeight='bold';
		    	}
		    	else
				{                       
					document.getElementById(reflabel).style.color='black';
		    		document.getElementById(reflabel).style.fontWeight='normal';
		    	}    		    	                            
		}   
}
document.getElementById('Art').value=NbArticles
document.getElementById('Total').value=Total + " €"
document.getElementById('TotalReduc1').value=Total + " €"
document.getElementById('TotalReduc2').value=Total + " €"
 
}
 
 
 
</script>
 
 
 
<style type='text/css'>
fieldset {width:75%;}
input {float:left;}
label {float:left;}
.right {float:right;}
fieldset{boder:0px;}
</style> 
 
<title>Cr&eacute;ation du kit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body onload="option()">
<form method="post" action="" style="height: 493px" name="OptionsSelection">
 
<fieldset id='Collier&Laisse' >
	<b>Collier&Laisse</b><br />
	<input type='radio' value='16' id='produit94' name='rubrique1' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit94' for='produit94'>Kit chiot nylon</label>
	<input size='6'   class='right' id='prix94' name='prix94' type='text' onFocus='javascript: this.blur()' value='16 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='18' id='produit95' name='rubrique1' checked='checked' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit95' for='produit95' style='color:red; font-weight:bold;'>Kit chiot cuir</label>
	<input size='6'  class="right" id='prix95' name='prix95' type='text' onFocus='javascript: this.blur()' value='18 €'/>
	<br style='clear:both;'/>
</fieldset >
 
<br /><br />
<fieldset id='Croquettes' >
	<b>Croquettes</b><br />
	<input type='radio' value='62' id='produit11054' name='rubrique2' checked='checked' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit11054' for='produit11054' style='color:red; font-weight:bold;'>Nutram chiot - Sac de 15 Kg</label>
	<input size='6'  class="right" id='prix11054' name='prix11054' type='text' onFocus='javascript: this.blur()' value='62 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='52' id='produit111000100' name='rubrique2' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit111000100' for='produit111000100'>Brit chiot - Sac de 15 KG</label>
	<input size='6'  class="right" id='prix111000100' name='prix111000100' type='text' onFocus='javascript: this.blur()' value='52 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='65.9' id='produit11202300' name='rubrique2' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit11202300' for='produit11202300'>Royal Canin Junior Maxi<br>Sac 15 kg</label>
	<input size='6'  class="right" id='prix11202300' name='prix11202300' type='text' onFocus='javascript: this.blur()' value='65.9 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='69.9' id='produit11300200' name='rubrique2' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit11300200' for='produit11300200'>Pro Plan chiot Agneau - Sac de 15 Kg</label>
	<input size='6'  class="right" id='prix11300200' name='prix11300200' type='text' onFocus='javascript: this.blur()' value='69.9 €'/>
	<br style='clear:both;'/>
</fieldset >
<br /><br />
<fieldset id='Couchage' >
	<b>Couchage</b><br />
	<input type='radio' value='65' id='produit335500800' name='rubrique3' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit335500800' for='produit335500800'>Corbeille Tenero Taille L</label>
	<input size='6'  class="right" id='prix335500800' name='prix335500800' type='text' onFocus='javascript: this.blur()' value='65 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='119' id='produit335501250' name='rubrique3' checked='checked' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit335501250' for='produit335501250' style='color:red; font-weight:bold;'>Doggielounge Large - Camouflage</label>
	<input size='6'  class="right" id='prix335501250' name='prix335501250' type='text' onFocus='javascript: this.blur()' value='119 €'/>
	<br style='clear:both;'/>
</fieldset >
<br /><br />
<fieldset id='Gamelle' >
	<b>Gamelle</b><br />
	<input type='radio' value='15' id='produit51' name='rubrique4' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit51' for='produit51'>Lot de 2 gamelles inox classiques</label>
	<input size='6'  class="right" id='prix51' name='prix51' type='text' onFocus='javascript: this.blur()' value='15 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='25' id='produit50' name='rubrique4' checked='checked' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit50' for='produit50' style='color:red; font-weight:bold;'>Lot de 2 gamelles inox antidérapantes, 2.8 L.</label>
	<input size='6'  class="right" id='prix50' name='prix50' type='text' onFocus='javascript: this.blur()' value='25 €'/>
	<br style='clear:both;'/>
	<input type='radio' value='45' id='produit52' name='rubrique4' onclick='setTimeout(function(){option()},100);' />
	<label id='lblproduit52' for='produit52'>Lot de 2 gamelles + porte gamelle</label>
	<input size='6'  class="right" id='prix52' name='prix52' type='text' onFocus='javascript: this.blur()' value='45 €'/>
	<br style='clear:both;'/>
</fieldset >
<br /><br />
 <div>
  <b >Nombre d'Articles : </b ><input size='8' id='Art' name='Art' onFocus='javascript: this.blur()' type='text' value='' />
 </div>
 <br /><br/>
 <div><b>Total : </b><input size='8' id='Total' name='Total' onFocus='javascript: this.blur()' type='text' value=''/></div>
 <br /><br />
<div>
  <b>Total Après réduction : </b><input size='8' id='TotalReduc1' name='TotalReduc1' onFocus='javascript: this.blur()' type='text' value=''  /><br /><br />
</div><br /><br />
<div>
   <b>Total Après réduction suivant le nombre d'articles : </b>	<input size='8' id='TotalReduc2' name='TotalReduc2' onFocus='javascript: this.blur()' type='text' value=''/><br /><br />
  </div>
<br /><br />
</form>
 
 
</body>
</html>

Creer un configurateur avec des prix

JavaScript

Discussions similaires

Partager

Partager