Sujet Précédent Sujet Suivant

Mini devis en Javascript

Résolu/Fermé
lgf25 Messages postés 12 Date d'inscription dimanche 28 février 2010 Statut Membre Dernière intervention 15 juin 2010 - 8 juin 2010 à 14:00
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 15 juin 2010 à 11:16
Bonjour,

J'essaye de faire une sorte de devis en ligne pour des cartes de visite. Étant un peu nul en Javascript je m'en remet à vous (après de longues recherche sur le net).

Je voudrais qu'à chaque fois qu'un utilisateur sélectionne un paramètre dans une liste déroulante le prix change grâce à des fonctions. Voici mon code:

JavaScript 
function format()
{
	var type = document.ElementById("format").value;
	if(type.value == "rectangle")
	{
		var prixF = 0.19;
	}
	else
	{
	
		var PrixF=0.22;
	}
	
	return prixF;
}



function papier()
{
	var type = document.ElementById("papier").value;
	if(type.value == "mat")
	{
		var prixP = 0.00;
	}
	else
	{
	
		var PrixP =0.25;
	}
	
	return prixP;
}

function impression()
{
	var type = document.ElementById("impression").value;
	if(type.value == "recto")
	{
		var prixIm = 0.00;
	}
	else
	{
	
		var prixIm=0.15;
	}
	
	return prixIm;
}

function total()
{
   var prixFormat = format();
   var prixPapier = papier();
   var PrixImpression = impression();
   
   var prixTotal= eval(prixFormat.value) + eval(prixPapier.value) + eval(prixImpression.value);
   return prixTotal;
}


HTML 
<form method="POST" name="carte">  
    	
     	<label >Format:</label>
       <select name="format" id="format" onchange="changementType();" onchange="format();">
       <option value="rectangle">Retangulaire</option>	   
	   <option value="rond">Ronde</option>	  		   
	   </select><br/><br />
	   
       <!---- Rectangulaire ----->
       
       
        <div id="rectangle" style="display:none">
       <label >Dimensions:</label>
       <select name="dim" id="dim">
       <option value="80*126">80*126</option>	   	
	   </select> mm<br/><br>
	   </div>
  
        <div id="rond" style="display:none">
       <label >Dimensions:</label>
       <select name="dimension" id="dimension">
       <option value="8058">80*58</option>	   	
	   </select> mm<br/><br>
	   </div>
       
       <label >Impression:</label>
	   <select name="impression" id="impression" onchange="impression();">
       <option value="recto">Recto</option>	 
       <option value="rv">Recto/Verso</option>	  	   
	   </select><br /><br />
    
    
        <label >Papier:</label>
	   <select name="papier" id="papier" onchange="papier();">
       <option value="mat">mat</option>	 
       <option value="brillant">brillant</option>	  	   
	   </select><br /><br />

		<label >Quantité:</label>
	   <select name="qtite" id="qtite">
       <option value="100">100</option>	 
       <option value="250">250</option>	 
       <option value="500">500</option>
       <option value="1000">1000</option>		 	   
	   </select><br /><br />
        
        Prix: <input type="text" type="hidden" name="total" id="total" onclick="total();"/>
       
   </form>


La fonction quantité n'est pas encore écrite car les autres ne fonctionnant... je ne l'ai pas faite.

Donc au final, je souhaiterais que dans mon input pour le prix, le prix apparaisse quand on clique dans le champ.

Je sais que dans mon code beaucoup de chose sont inutiles (mais je les garde en attendant et j'optimiserai après).

Merci d'avance pour votre aide.
Cordialement.

A voir également:

9 réponses

Réponse 1 / 9
titi_invi Messages postés 7 Date d'inscription mardi 8 juin 2010 Statut Membre Dernière intervention 29 juin 2010 2
Modifié par titi_invi le 8/06/2010 à 15:49
Salut,

- c'est getElementByID oubli pas le "get"
- tu fais .value 2 fois

Mais bon, je pense que tu t'es un peu compliqué la chose avec toutes ces fonctions.

Je mettrais les prix directement dans les valeur des options.

Avec ça, ça marche bien (j'ai pris juste format et impression): 

<script language="javascript">  

function total()  
{  
   var format = document.getElementById("format").value;  
   var impression = document.getElementById("impression").value;  
   var prixTotal= parseFloat(format) + parseFloat(impression);  
     
   document.getElementById("total").value = prixTotal;  
}  

</script>  

<body>  
       
      <label for="format">Format:</label>  
       <select name="format" id="format">  
       <option value=0.19>Retangulaire</option>      
    <option value=0.22>Ronde</option>          
    </select><br/><br />  
      
       <label for="impression">Impression:</label>  
    <select name="impression" id="impression">  
       <option value=0>Recto</option>    
       <option value=0.15>Recto/Verso</option>         
    </select><br /><br />  
   
      Prix: <input type="text" name="total" id="total" onclick="total();"/>  

</body>
1
lgf25 Messages postés 12 Date d'inscription dimanche 28 février 2010 Statut Membre Dernière intervention 15 juin 2010
8 juin 2010 à 16:28
Merci beaucoup pour ta réponse!!
Je vais tester tout ça =)
0
Réponse 2 / 9
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
15 juin 2010 à 08:43
non ce ne peut pas être le <form qui bloque, chez moi ça fonctionne aussi bien avec FireFox qu'avec IE (avec ce dernier il faut autoriser l'execution des scripts, dans la ligne en jaune en haut sous la barre de menu)

essayes en modifiant ainsi, tu vas avoir des boites d'alert si les fct sont bien appelées 

<script type="text/javascript">
	//tu utilises les même nom  pour le nom des fonctions et des id  ça genere un conflit
function format_papier(){
	alert("Fonction format papier appelée !");
	var type = document.getElementById("format"); //ne mets pas deux fois .value
	if(type.value == "rectangle")	{
		var prixF = 0.19;
		if(document.getElementById('rectangle').style.display =="none"){
			//on rend visible la liste de choix de ddimension correspondante au rectangle
			document.getElementById('rectangle').style.display = 'block';
		}
		if(document.getElementById('rond').style.display =="block"){
			//on cache la liste de choix de ddimension correspondante au rond
			document.getElementById('rond').style.display = "none";
		}
		
		
	}	else if (type.value=="rond")	{ //ainsi tu poura rajouter d'autre formats (carré ?)
		var prixF = 0.22; //attention PrixF ce n'est pas la même varaible que PrixF
		if(document.getElementById('rond').style.display =="none"){
			//on rend visible la liste de choix de ddimension correspondante au rond
			document.getElementById('rond').style.display = 'block';
		}
		if(document.getElementById('rectangle').style.display =="block"){
			//on cache la liste de choix de ddimension correspondante au rectangle
			document.getElementById('rectangle').style.display = "none";
		}	
	}	
	return prixF;
	
}



function type_papier(){
	var type = document.getElementById("papier");
	if(type.value == "mat")	{
		var prixP = 0.00;
	}	else	{	
		var prixP =0.25;
	}	
	return prixP;
}

function type_impression(){
	var type = document.getElementById("impression");
	if(type.value == "recto")	{
		var prixIm = 0.00;
	}	else	{
		var prixIm=0.15;
	}	
	return prixIm;
}

function calcul_total(){
	alert("Fonction calcul total appelée !");
   var prixFormat = format_papier(); //la fonction va te retourner une valeur par exemple 0.19, alors ne remet pas .value
   var prixPapier = type_papier();
   var prixImpression = type_impression(); //attention à la casse !!
	var quantite=document.getElementById('qtite');
   //parseFloat sert a convertir en nombre a virgule
	if(quantite.value !=""){
		//si choix autre que la ligne --choisissez --
		var prixTotal= (parseFloat(prixFormat) + parseFloat(prixPapier) + parseFloat(prixImpression)) * quantite.value;
		prixTotal=prixTotal.toFixed(2); // arrondi a deux chiffres après la virgule
		var total=document.getElementById('total');
		total.value=prixTotal; //on ecrit le resultat dans l'input total
	}else{
		return false;
	}
}
</script>
1
Réponse 3 / 9
lgf25 Messages postés 12 Date d'inscription dimanche 28 février 2010 Statut Membre Dernière intervention 15 juin 2010
9 juin 2010 à 18:15
Je voulais savoir s'il est possible d'ouvrir une nouvelle fenêtre avec le récapitulatif de ce que veux commander le client?
Si oui, comment fait-on pour passer une valeur d'une page à une autre en Javascript s'il vous plait??

Cordialement.
0
Réponse 4 / 9
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
9 juin 2010 à 19:32
j'ai rectifié beaucoup de choses ça marche chez moi 

<script type="text/javascript">
	//tu utilises les même nom  pour le nom des fonctions et des id  ça genere un conflit
function format_papier(){
	var type = document.getElementById("format"); //ne mets pas deux fois .value
	if(type.value == "rectangle")	{
		var prixF = 0.19;
		if(document.getElementById('rectangle').style.display =="none"){
			//on rend visible la liste de choix de ddimension correspondante au rectangle
			document.getElementById('rectangle').style.display = 'block';
		}
		if(document.getElementById('rond').style.display =="block"){
			//on cache la liste de choix de ddimension correspondante au rond
			document.getElementById('rond').style.display = "none";
		}
		
		
	}	else if (type.value=="rond")	{ //ainsi tu poura rajouter d'autre formats (carré ?)
		var prixF = 0.22; //attention PrixF ce n'est pas la même varaible que PrixF
		if(document.getElementById('rond').style.display =="none"){
			//on rend visible la liste de choix de ddimension correspondante au rond
			document.getElementById('rond').style.display = 'block';
		}
		if(document.getElementById('rectangle').style.display =="block"){
			//on cache la liste de choix de ddimension correspondante au rectangle
			document.getElementById('rectangle').style.display = "none";
		}	
	}	
	return prixF;
	
}



function type_papier(){
	var type = document.getElementById("papier");
	if(type.value == "mat")	{
		var prixP = 0.00;
	}	else	{	
		var PrixP =0.25;
	}	
	return prixP;
}

function type_impression(){
	var type = document.getElementById("impression");
	if(type.value == "recto")	{
		var prixIm = 0.00;
	}	else	{
		var prixIm=0.15;
	}	
	return prixIm;
}

function calcul_total(){
   var prixFormat = format_papier(); //la fonction va te retourner une valeur par exemple 0.19, alors ne remet pas .value
   var prixPapier = type_papier();
   var prixImpression = type_impression(); //attention à la casse !!
	var quantite=document.getElementById('qtite');
   //parseFloat sert a convertir en nombre a virgule
	if(quantite.value !=""){
		//si choix autre que la ligne --choisissez --
		var prixTotal= (parseFloat(prixFormat) + parseFloat(prixPapier) + parseFloat(prixImpression)) * quantite.value;
		var total=document.getElementById('total');
		total.value=prixTotal; //on ecrit le resultat dans l'input total
	}else{
		return false;
	}
}
</script>
<!-- les valeurs seront passées a ton_script.php en POST -->
<form method="POST" name="carte" action="ton_script.php">      	
     	<label >Format:</label>
       <select name="format" id="format" onchange="format_papier();">
			<!-- il faut rajouter une ligne choisissez pour qu'il y ait au moins un chagement sinon on ne peut pas chosir directement rectangle -->
			<option value="">-- Choisissez --</option>	   
			<option value="rectangle">Rectangulaire</option>	   
			<option value="rond">Ronde</option>	  		   
	   </select>
		<br/><br />
	   
       <!---- Rectangulaire ----->
       
       
        <div id="rectangle" style="display:none">
       <label >Dimensions:</label>
       <select name="dim" id="dim">
			<option value="80*126">80*126</option>	   	
		</select> 
		mm<br/><br>
	   </div>
  
        <div id="rond" style="display:none">
       <label >Dimensions:</label>
       <select name="dimension" id="dimension">
       <option value="80*58">80*58</option>	   	
	   </select> mm<br/><br>
	   </div>
       
       <label >Impression:</label>
	   <select name="impression" id="impression" onchange="type_impression();">
       <option value="recto">Recto</option>	 
       <option value="rv">Recto/Verso</option>	  	   
	   </select><br /><br />
    
    
        <label >Papier:</label>
	   <select name="papier" id="papier" onchange="type_papier();">
       <option value="mat">mat</option>	 
       <option value="brillant">brillant</option>	  	   
	   </select><br /><br />

		<label >Quantité:</label>
	   <select name="qtite" id="qtite" onChange="calcul_total();">
			<option value="">-- Choisissez --</option>
       <option value="100">100</option>	 
       <option value="250">250</option>	 
       <option value="500">500</option>
       <option value="1000">1000</option>		 	   
	   </select><br /><br />
        <!-- la avec un input type hidden tu auras du mal a cliquer dessu hidden=caché --> 
        <!-- Prix: <input type="text" type="hidden" name="total" id="total" onclick="total();"/> -->
        Prix: <input type="text" name="total" id="total"/>
       
   </form>
0
lgf25 Messages postés 12 Date d'inscription dimanche 28 février 2010 Statut Membre Dernière intervention 15 juin 2010
14 juin 2010 à 19:18
Merci beaucoup pour ce script !
Cependant je n'arrive pas à afficher le prix ainsi que les options pour rectangle et rond?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
14 juin 2010 à 19:35
je n'arrive pas à afficher le prix ainsi que les options pour rectangle et rond?

c'est à dire ?

quel code as tu rajouté ?
0
lgf25 Messages postés 12 Date d'inscription dimanche 28 février 2010 Statut Membre Dernière intervention 15 juin 2010
14 juin 2010 à 19:46
J'ai ajouté le votre pour l'instant pour tester et ceci pour essayer d'afficher le total: 

 Prix: <input type="text" name="total" id="total" onclick="calcul_total();"/>
0
Réponse 6 / 9
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
14 juin 2010 à 21:31
javascript est basé sur des evenements des elements html de la page mais tous les elements n'ont pas tous les evenements notament input ne réagit pas sur un onclick
0
lgf25 Messages postés 12 Date d'inscription dimanche 28 février 2010 Statut Membre Dernière intervention 15 juin 2010
14 juin 2010 à 22:17
Je n'ai ps bien compris... Avec le code de titi_invi le onclick marche impec avec le input. De plus votre code fonctionne chez vous et non chez moi oO
J'aurais aimé utiliser votre code car il me permet ensuite d'utiliser le formulaire avec du php... Je ne comprend pas pourquoi les options et le prix ne s'affichent pas =(
Merci.
0
Réponse 7 / 9
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
14 juin 2010 à 22:39
en fait dans mon code le prix total se calcule automatiquement dès que l'on change la quantité

mais si tu veux on peux le modifier pour que ce calcul se fasse sur le changement d'autres listes comme ça: 

<script type="text/javascript">
	//tu utilises les même nom  pour le nom des fonctions et des id  ça genere un conflit
function format_papier(){
	var type = document.getElementById("format"); //ne mets pas deux fois .value
	if(type.value == "rectangle")	{
		var prixF = 0.19;
		if(document.getElementById('rectangle').style.display =="none"){
			//on rend visible la liste de choix de ddimension correspondante au rectangle
			document.getElementById('rectangle').style.display = 'block';
		}
		if(document.getElementById('rond').style.display =="block"){
			//on cache la liste de choix de ddimension correspondante au rond
			document.getElementById('rond').style.display = "none";
		}
		
		
	}	else if (type.value=="rond")	{ //ainsi tu poura rajouter d'autre formats (carré ?)
		var prixF = 0.22; //attention PrixF ce n'est pas la même varaible que PrixF
		if(document.getElementById('rond').style.display =="none"){
			//on rend visible la liste de choix de ddimension correspondante au rond
			document.getElementById('rond').style.display = 'block';
		}
		if(document.getElementById('rectangle').style.display =="block"){
			//on cache la liste de choix de ddimension correspondante au rectangle
			document.getElementById('rectangle').style.display = "none";
		}	
	}	
	return prixF;
	
}



function type_papier(){
	var type = document.getElementById("papier");
	if(type.value == "mat")	{
		var prixP = 0.00;
	}	else	{	
		var prixP =0.25;
	}	
	return prixP;
}

function type_impression(){
	var type = document.getElementById("impression");
	if(type.value == "recto")	{
		var prixIm = 0.00;
	}	else	{
		var prixIm=0.15;
	}	
	return prixIm;
}

function calcul_total(){
   var prixFormat = format_papier(); //la fonction va te retourner une valeur par exemple 0.19, alors ne remet pas .value
   var prixPapier = type_papier();
   var prixImpression = type_impression(); //attention à la casse !!
	var quantite=document.getElementById('qtite');
   //parseFloat sert a convertir en nombre a virgule
	if(quantite.value !=""){
		//si choix autre que la ligne --choisissez --
		var prixTotal= (parseFloat(prixFormat) + parseFloat(prixPapier) + parseFloat(prixImpression)) * quantite.value;
		prixTotal=prixTotal.toFixed(2); // arrondi a deux chiffres après la virgule
		var total=document.getElementById('total');
		total.value=prixTotal; //on ecrit le resultat dans l'input total
	}else{
		return false;
	}
}
</script>
<!-- les valeurs seront passées a ton_script.php en POST -->
<form method="POST" name="carte" action="ton_script.php">      	
     	<label >Format:</label>
       <select name="format" id="format" onchange="format_papier(); calcul_total();">
			<!-- il faut rajouter une ligne choisissez pour qu'il y ait au moins un chagement sinon on ne peut pas chosir directement rectangle -->
			<option value="">-- Choisissez --</option>	   
			<option value="rectangle">Rectangulaire</option>	   
			<option value="rond">Ronde</option>	  		   
	   </select>
		<br/><br />
	   
       <!---- Rectangulaire ----->
       
       
        <div id="rectangle" style="display:none">
       <label >Dimensions:</label>
       <select name="dim" id="dim">
			<option value="80*126">80*126</option>	   	
		</select> 
		mm<br/><br>
	   </div>
  
        <div id="rond" style="display:none">
       <label >Dimensions:</label>
       <select name="dimension" id="dimension">
       <option value="80*58">80*58</option>	   	
	   </select> mm<br/><br>
	   </div>
       
       <label >Impression:</label>
	   <select name="impression" id="impression" onchange="type_impression(); calcul_total();">
       <option value="recto">Recto</option>	 
       <option value="rv">Recto/Verso</option>	  	   
	   </select><br /><br />
    
    
        <label >Papier:</label>
	   <select name="papier" id="papier" onchange="type_papier(); calcul_total();">
       <option value="mat">mat</option>	 
       <option value="brillant">brillant</option>	  	   
	   </select><br /><br />

		<label >Quantité:</label>
	   <select name="qtite" id="qtite" onChange="calcul_total();">
			<option value="">-- Choisissez --</option>
       <option value="100">100</option>	 
       <option value="250">250</option>	 
       <option value="500">500</option>
       <option value="1000">1000</option>		 	   
	   </select><br /><br />
        <!-- la avec un input type hidden tu auras du mal a cliquer dessu hidden=caché --> 
        <!-- Prix: <input type="text" type="hidden" name="total" id="total" onclick="total();"/> -->
        Prix  total: <input type="text" name="total" id="total" />
       
   </form>
0
lgf25 Messages postés 12 Date d'inscription dimanche 28 février 2010 Statut Membre Dernière intervention 15 juin 2010
15 juin 2010 à 07:46
Merci pour votre aide.
Malheureusement le script ne fonctionne toujours pas chez moi... Le input total reste vide et les options rectangle et rond ne s'affiche pas.
Je me demande si ce n'est pas le <form> qui bloque tout.
0
Réponse 8 / 9
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
15 juin 2010 à 08:46
attention le prix ne s'affiche pas qd tu cliques dans l'input PRIX mais qd tu modifies les autres listes et à condition que le choix ai été fait dans toutes
0
lgf25 Messages postés 12 Date d'inscription dimanche 28 février 2010 Statut Membre Dernière intervention 15 juin 2010
15 juin 2010 à 10:42
Wahou!!!
Merci infiniment! Cela fonctionne à merveille.
Désolé pour le dérangement et les question redondantes ^^"
Bonne journée.
0
Réponse 9 / 9
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
15 juin 2010 à 11:16
alors mets en résolu
0

Discussions similaires

Perdu mon code du boîtier x96 mini
Thierry -
Panth33ra -

1 réponse
se connecter à facebook avec opera
satchan -
boule97 -

1 réponse
mise à jour boitier X96 mini
Brunoche -
Vico -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses