Affichage de "undefined" avant le résultat d'un calcul

Bonjour,
je suis confrontée à un problème, j'ai mis en place un formulaire avec différents select, il y'en a 4. Lorsque le troisième choix est fait au lieu de ne rien afficher dans la case de résultats il y est inscrit "undefined", savez-vous comment je peux bloquer cet affichage ?
Merci par avance
voici le lien : http://etrecandidat.fr/prev/tracts.php
le code html :

		<div id="formulaire">
			    <h5>1. Choisissez ci-dessous le format, le grammage, la quantité ainsi que le type de livraison souhaitée.</h5>
			<form method="post" action="cible_tracts.php" >
			
            
            <select name="format" id="format" onChange="calcul()" class="select">
				<option value="" class="select_option">Selectionnez le format</option>
				<option value="Format A4">Format A4</option>
				<option value="Format A5">Format A5</option>
			</select>
			<br/>
			<select name="papier" id="papier" onChange="calcul()" class="select">
				<option value="">Selectionnez le papier /m2</option>
				<option value="Papier 80g">Papier 80g</option>
				<option value="Papier 90g">Papier 90g</option>
				<option value="Papier 115g">Papier 115g</option>
				<option value="Papier recyclé 80g">Papier recyclé 80g</option>
			</select>
			<br/>
			<select name="quantite" id="quantite" onChange="calcul()" class="select">
				<option value="">Selectionnez la quantité</option>
				<option value="500 Exemplaires">500 Exemplaires</option>
				<option value="1 000 Exemplaires">1 000 Exemplaires</option>
				<option value="2 500 Exemplaires">2 500 Exemplaires</option>
				<option value="5 000 Exemplaires">5 000 Exemplaires</option>
				<option value="10 000 Exemplaires">10 000 Exemplaires</option>
				<option value="20 000 Exemplaires">20 000 Exemplaires</option>
				<option value="50 000 Exemplaires">50 000 Exemplaires</option>
			</select>
			<br/>
			<select name="delai" id="delai" onChange="calcul()" class="select">
				<option value="">Selectionnez la livraison</option>
				<option value="Livraison économique">Livraison économique - 7 jours</option>
				<option value="Livraison express">Livraison express - 6 jours</option>
				<option value="Livraison urgente">Livraison urgente - 4 jours</option>
			</select>

			
		
            <div id="conteneur_prix"><div id="prix"></div></div>

et la partie concernée du code JS :

function calcul() {
	var formatDiv = document.getElementById("format");
	var format = formatDiv.options[formatDiv.selectedIndex].value;
	
	var papierDiv = document.getElementById("papier");
	var papier = papierDiv.options[papierDiv.selectedIndex].value;
	
	var quantiteDiv = document.getElementById("quantite");
	var quantite = quantiteDiv.options[quantiteDiv.selectedIndex].value;
	
	var delaiDiv = document.getElementById("delai");
	var delai = delaiDiv.options[delaiDiv.selectedIndex].value;
	
	var prix = tracts[format][papier][quantite][delai];
	document.getElementById("prix").innerHTML = prix;
    document.getElementById("prix_send").value = prix;
	

}

Bonjour,
ton problème vient du fait que la fonction calcul() que tu appelles à chaque onchange essaie de trouver des valeurs dans ton objet tracts même si certains selects sont vides, et donc, il cherche des valeurs qui n'existent pas.

Il me semble que pour afficher un prix, tous tes selects doivent avoir une valeur.

Tu devrais faire un test pour voir si tous les selects ont une valeur, et si oui, afficher le résultat.

quelque chose du genre:

if(typeof(format) == 'undefined'){
  return false;
}

La même chose pour chacun de tes selects, comme ça, la fin du script ne s'exécute que si toutes tes valeurs sont définies.
Modifié par loicbcn (12 Aug 2013 - 12:57)

Merci pour ta réponse, voilà ce que j'ai fais, mais j'ai toujours le même résultat

function calcul() {
	var formatDiv = document.getElementById("format");
	var format = formatDiv.options[formatDiv.selectedIndex].value;
	if(typeof(format) == 'undefined'){
  	return false;
  	}
	
	var papierDiv = document.getElementById("papier");
	var papier = papierDiv.options[papierDiv.selectedIndex].value;
	if(typeof(papier) == 'undefined'){
  	return false;
  	}
	
	var quantiteDiv = document.getElementById("quantite");
	var quantite = quantiteDiv.options[quantiteDiv.selectedIndex].value;
	if(typeof(quantite) == 'undefined'){
  	return false;
  	}
	
	var delaiDiv = document.getElementById("delai");
	var delai = delaiDiv.options[delaiDiv.selectedIndex].value;
	if(typeof(delai) == 'undefined'){
  	return false;
  	}
	
	var prix = tracts[format][papier][quantite][delai];
	document.getElementById("prix").innerHTML = prix;
    document.getElementById("prix_send").value = prix;
	

}

Hello,

à priori ce n'est pas typeof(mavariable) == 'undefined' qu'il faut tester mais mavariable == '' ou plus simplement :

if(!format) return false;

Edit: par contre le undefined correspond peut-être à la variable tracts...
Modifié par Heyoan (12 Aug 2013 - 14:10)

Non @Heyoan, tracts est bien définie et ta solution devrait résoudre le problème.

@Georgetta : pendant les 2 premières saisies, ton script plante complètement à la ligne

var prix = ...

. La 3ème fois il a assez d'infos pour allez jusqu'au bout du tableau associatif et donc afficher une valeur, mais la valeur en question se trouve être undefined puisque delai est une chaine de caractères vide à ce moment la.

Et mis à part ce problème de js, fais bien une vérification de ton prix côté serveur hein