11550 sujets

JavaScript, DOM et API Web HTML5

Apparaitre 2 éléments

bonjour
j'aimerais faire apparaitre 2 nouveaux éléments dans mon formulaire mais ça ne fonctionne pas quelq'un a t il une idée merci d'avance pour votre aide



< html >
<head>

<script type="text/javascript">
function Visible(select_surveille,nom_objet_invisible,valeur_surveillee) {
  var Obj = select_surveille.form.elements[nom_objet_invisible] ;
  if (select_surveille.options[select_surveille.selectedIndex].firstChild.nodeValue == valeur_surveillee) {
    	Obj.style.visibility = 'visible';
  } else {
     Obj.style.visibility = 'hidden';
 }
}
</script>
</head>
<body>


<form action="#">
 <select name="select2"  onchange="Visible(this,'sos','immo');">
    <option value="01" selected="selected">voiture</option>
    <option value="immo">immo</option>
    <option value="03">essai</option>
  </select>
  

  <select name="sos"  style="visibility: hidden;" >
    <option value="01" selected="selected">aa</option>
    <option value="02">bb</option>
    <option value="03">cc</option>
  </select>
  
<select name="sos"  style="visibility: hidden;" >
    <option value="01" selected="selected">a</option>
    <option value="02">b</option>
    <option value="03">c</option>
  </select>
 
</form>


</body>
</html>

Modifié par karenma (19 Feb 2008 - 17:17)
pourquoi ne pas mettre les deux select dans un seul div et faire disparaitre le div qui lui sera unique Smiley cligne .

sinon mon avis

2 objets avec le même name ce n'est pas propre et pareil (non pire ) pour 2 obj ayant le même id.

mais si tu sais à l'avance que les 2 objets sont liés.

ou s'ils ont un nom qui est commun genre un s'apelle sos1 et l'autre sos2 tu devrais quand tu reçois sos1 ou sos2 changé l'etat de sos1 et sos2

ai-je repondu a ton sos Smiley sweatdrop ? ( bon je sais je me cache )

Pascal
bonjour
j'ai essayé de faire la même chose avec un div mais cela ne fonctionne pas
Pourquoi ?
merci d'avance pour votre réponse

<html >
<head>
<script type="text/javascript">
function Visible(select_surveille,nom_objet_invisible,valeur_surveillee) {
  var Obj = select_surveille.form.elements[nom_objet_invisible] ;
  if (select_surveille.options[select_surveille.selectedIndex].firstChild.nodeValue == valeur_surveillee) {
    	Obj.style.visibility = 'visible';
  } else {
     Obj.style.visibility = 'hidden';
 }
}
</script>
</head>
<body>
<form action="#">
 <select name="select2"  onchange="Visible(this,'sos','immo');">
    <option value="01" selected="selected">voiture</option>
    <option value="immo">immo</option>
    <option value="03">essai</option>
  </select>
  
 <div id="Layer2" name="sos" style="visibility: hidden;">
  <select name="premier" >
    <option value="01" selected="selected">a</option>
    <option value="02">b</option>
    <option value="03">c</option>
  </select>
  
 
<select name="deuxième "  >
    <option value="01" selected="selected">aa</option>
    <option value="02">bb</option>
    <option value="03">cc</option>
  </select>
 </div>
</form>
</body>
</html>
Re,

si je remplace
var Obj = select_surveille.form.elements[nom_objet_invisible] ;

par
var Obj = document.getElementById('Layer2') ;

ça marche.

<edit> evite les majuscules, les accents et les espaces dans les id et name (comme name="deuxième " plus loin dans ton code) </ edit>

si tu veux faire du dynamique je ferais un

var Obj = document.getElementById(nom_objet_invisible) ;



pk? bah,
je crois avoir lu que seuls quelques éléments comme les liens les images les inputs étaient placé dans le tableaux elements d'un form.
mais c'est un souvenir vague donc pas sûr.


de toute façon je te conseille vraiment de regarder la console d'erreur voir même d'installer firebug. donc d'utiliser toujours FF quand tu debug du js !
avec firebug j'ai vu tout de suite que le pb c'etait Obj has no properties.

et sinon je ne pense pas que ce soit bien de travailler sur des name ( qui peuvent être multiple ) surtout quand on a un id ( car les id c'est fait pour être unique )
Modifié par CPascal (19 Feb 2008 - 21:54)
bonjour
j'ai fait comme tu m'as dit et cela a fonctionné
mais je me demandais comment s'y prendre si l'on veut afficher des éléments à partir de deux mots et non d'un seul du menu déroulant
Merci davance pour votre aide


<html>
<head>

<script type="text/javascript">
function Visible(select_surveille,nom_objet_invisible,valeur_surveillee) {
 var Obj = document.getElementById('Layer2') ;
  if (select_surveille.options[select_surveille.selectedIndex].firstChild.nodeValue == valeur_surveillee) {
    	Obj.style.visibility = 'visible';
  } else {
     Obj.style.visibility = 'hidden';
 }
}
</script>
</head>
<body>
<form action="">
 <select name="select2"  onchange="Visible(this,'sos','immo & [b]essai[/b]' );">
    <option value="01" selected="selected">voiture</option>
    <option value="02">immo</option>
    <option value="03">essai</option>
    <option value="04">ennui</option>
    <option value="05">problème</option>
  </select>
  
 <div id="Layer2" name="sos" style="visibility: hidden;" >
  <select name="premier" >
    <option value="01" selected="selected">a</option>
    <option value="02">b</option>
    <option value="03">c</option>
  </select>
  
 
<select name="deuxième "  >
    <option value="01" selected="selected">aa</option>
    <option value="02">bb</option>
    <option value="03">cc</option>
  </select>
 </div>
</form>


</body>
</html>
Sujet clos
Aller à