Affichage / masquage d'élements de formulaire

Bonjour,

J'ai développé un petit script qui permet d'obtenir le prix total d'un produit suivant les options choisies (ici ce sont des cartes de visite). Le seul problème est que le total ne s'affiche pas ni les listes déroulantes qui doivent apparaitre en fonction du format choisi.
Je ne comprends pas pourquoi ça ne fonctionne pas, le code me semble pourtant juste.

Javascript

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
 
 
<script language="javascript">
 
function format_papier()
{
	var type = document.getElementById("format"); 
	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")	
	{ 
		var prixF = 0.22; 
		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()
{
   	// On récupère les valeurs de chaque options grâce à l'appel des fonctions
	var prixFormat = format_papier(); 
	var prixPapier = type_papier();
	var prixImpression = type_impression(); 
	var quantite=document.getElementById('qtite');
 
	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>

Le formulaire HTML

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
 
<form method="POST" name="carte" action="ton_script.php">      	
     	<label >Format:</label>
       <select name="format" id="format" onchange="format_papier();">
 
			<option value="">-- Choisissez --</option>	   
			<option value="rectangle">Rectangulaire</option>	   
			<option value="rond">Ronde</option>	  		   
	   </select>
		<br/><br />
 
 
 
 
        <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 />
 
        Prix: <input type="text" name="total" id="total" onclick="calcul_total();"/>
 
   </form>

Si quelqu'un peut m'aider =(
Merci.

P.S: Merci à Alain_42 pour l'amélioration de ce code