Afficher un IFRAME selon un select [Résolu]

Signaler
Messages postés
4
Date d'inscription
vendredi 3 février 2012
Statut
Membre
Dernière intervention
4 février 2012
-
Messages postés
4
Date d'inscription
vendredi 3 février 2012
Statut
Membre
Dernière intervention
4 février 2012
-
Bonjour à tous,

Je sollicite votre aide car je n'arrive pas à finaliser mon projet.

But : J'ai un page "tarif" sur laquelle j'aimerai que le tarif "euro" s'affiche(via des iframes) au chargement de la page.
Ensuite l'internaute peut changer la devise du tarif grâce à un "select".

Problème : Au chargement de la page, tous les IFrames sont affichés. Donc dans le cas présent j'ai le tableau "Euros" et dessous le tableau "GBP". Ensuite l'utilisation du Select fait disparaitre le problème.
Donc je sais que mon problème vient du chargement de la page.

Pourriez-vous m'aider à résoudre ce problème car je ne maitrise pas du tout le javascript.

Je vous en remercie par avance.
Bien à vous

Le Code :

Dans le Body

<Form>
<select name="type" id="type" onchange="changementType();">
<option value="Euros">Euros</option>
<option value="GBP">GBP</option>

</select>
</Form>
<script language="javascript">
function changementType() {
var type = document.getElementById("type").value;
if (type == "Euros") {
document.getElementById("Euros").style.display="block";
} else{
document.getElementById("Euros").style.display="none";
}
if (type == "GBP"){
document.getElementById("GBP").style.display="block";
}else{
document.getElementById("GBP").style.display="none";
}

}
</script>



6 réponses

Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
Il y avait plus élégant comme code Javascript, en utilisant de l'instruction switch :

switch (type) {
case 0:
ifrAff.src="... (source 1ère monnaie)...";
break;
case 1:
ifrAff.src="... (source 2ème monnaie)...";
break;
case 2:
ifrAff.src="... (source 3ème monnaie)...";
break;
case 3:
ifrAff.src="... (source 4ème monnaie)...";
break;
...
}
Le code est moins lourd et plus facile à lire.
Bon courage!...
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
Bien le bonjour,
l'attribut visibility=hidden sur l'iframe (n'existe pas).
il faut placer dans les tags style : display:none(caché) ou block(montré).

Si joint le code "légèrement" modifié:

<html>
<head>
<script type="text/javascript">
/**
* Changement de devise
* 
* @param _select
*		Select sur lequel s'appuyer pour determiner la bonne iframe à afficher/masquer.
*/
function changementType(_select) {
// Récupération de la valeur sélectionnée.
var type = _select.value;
// Type d'affichage pour la devise anglaise(block/none).
// L'affichage de la devise Euro sera l'inverse, si on _gbpDisplay == "block" alors cache l'iframe Euros.
var _gbpDisplay;
// passage par un switch plutôt qu'une série de if.
switch (type){
case "Euros":
//cache l'iframe GBP
_gbpDisplay = "none";
break;
case "GBP":
// montre l'iframe GBP
_gbpDisplay = "block";
break;
}
/**
* Petite note: le switch ci desssus peut être parfaitement remplacé par cette ligne:
* 	_gbpDisplay (type "Euros")? "none": "block";
* Mais d'un point de vue lisibilité le swich est plus approprié, 
* D'un point de vue poid de page, c'est l'expression ternaire ci-dessus qu'il faut privilégier.
*/
// applique le style déterminé si dessus au contrôle concerné.
document.getElementById("GBP").style.display=_gbpDisplay;
// si le GBP est affiché, Euro est caché et inversement.
document.getElementById("Euros").style.display=(_gbpDisplay == "block") ? "none": "block";
}
</script> 
</head>

<Form>
<select name="type" id="type" onchange="changementType(this);">
<option value="Euros">Euros</option>
<option value="GBP">GBP</option>

</select>
</Form>

 

  

</html>




[o-_-o]
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
Pourquoi faire si compliqué et ne pas jouer sur l'attribut src d'un seul
<html>
<head>
<script type= "text/javascript">
function changementType(type) {
var ifrAff=document.getElementById("iframeaff");
if (type==0) {
ifrAff.src="https://sheet.zoho.com/publishrange.do?id=f836c5afc53f51a6f1b3cd9558401d38";
}
else {
ifrAff.src="https://sheet.zoho.com/publishrange.do?id=e2db64ef2215f65b6aa5776caf03cd66";
}
}
</script>
</head>

<form>
<select id="selmonnaie" onchange="changementType(this.selectedIndex)">
<option>Euros</option>
<option>GBP</option>
</select>
</form>


</html>

Voilà, c'est tout ce qui est nécessaire.

D'autre part, dans votre code Javascript, je vous signale que dans :
var type = document.getElementById("type").value; la propriété value de l'objet DOM
select n'existe pas, il faut passer par la collection options[] de l'objet en deux fois :
var idsel = document.getElementById("type").selectedIndex;
var type= document.getElementById("type").options[idsel].value;
Messages postés
4
Date d'inscription
vendredi 3 février 2012
Statut
Membre
Dernière intervention
4 février 2012

Merci à tous les deux pour votre participation.

J'ai fait honneur à vos réponses en testant les deux versions.

Pour la version de Zobibol j'ai effectivement plus qu'un Iframe qui s'affiche et, de ce point de vue, c'est déjà une partie de mon problème qui est résolu.

Par contre, il est affiché dans le Form "euros" et c'est la version GBP de l'iframe qui s'affiche. Lorsque je sélectionne Euros pour qu'effectivement l'iframe "Euros" s'affiche rien ne se passe. Je sélectionne ensuite Gbp dans le form, rien ne se passe puisque j'ai déjà l'iframe Gbp. Si je sélectionne à nouveau euros, là, j'obtiens bien le bon iframe et la machine est lancée.
J'avais exactement le même problème dans ma première version

Pour la version de JPerre, tout fonctionne comme l'objectif fixé. Il ne me reste plus qu'à "multiplier les petits pains" et envisager d'autres devises. Je vais maintenant me pencher sur la compréhension du script.


Encore merci à vous deux pour votre précieuse aide et je vous souhaite un chaleureux week-end !!!
Messages postés
4
Date d'inscription
vendredi 3 février 2012
Statut
Membre
Dernière intervention
4 février 2012

Messieurs re,

je viens de faire un essai en ajoutant basiquement un troisième élement mais cela ne fonctionnait pas. Je n'avait plus aucun tableau sur la page.

J'ai résolu le problème en faisant cela. Est-ce correct ?


if (type==0) {
}
else if (type==1){
}
else {
}
}

D'avance merci pour votre aide
Messages postés
4
Date d'inscription
vendredi 3 février 2012
Statut
Membre
Dernière intervention
4 février 2012

Grand merci pour votre aide...tout fonctionne correctement !!

Bon week à vous.
Pascal