11548 sujets

JavaScript, DOM et API Web HTML5

Afficher des cases supplémentaires dans formulaire suivant sélection

bonjour
j'essaye de faire apparaitre des boutons radio qu'avec certaines sélections de mon menu de formulaire mais le problème c que ça ne marche pas et en plus c en javascript,je me demandais s'il existait un moyen de le faire en php car la dernière fois que j'ai fait un truc en javascript ça ne marchait sur mozilla
Merci d'avance pour votre aide



<script type="text/javascript">
// <![CDATA[
function Visible(champs)
{
  var Obj = document.getElementByName(sos);
  if (Obj.style.visibility == 'hidden')
    {Obj.style.visibility = 'visible';}
  else
    {Obj.style.visibility = 'hidden';}
}

function Disabled(champs)
{
  var Obj = document.getElementByName(sos);
  if (Obj.disabled == false)
    {Obj.disabled = true;}
  else
    {Obj.disabled = false;}
}
// ]]>
</script>

</head>

<body>
<form>
 <select name="select2">
    <option value="01" selected="selected">voiture</option>
    <option value="02"     OnSelect="Disabled('sos1')" >immo</option>
  </select>
  <input type="radio" name="sos" value="radiobutton"    style="display: none " />
  </form>


</body>
Hum salut !!

En lisant le code ça parait normal que ça ne fonctionne pas !!
Au chargement de la page sos est invisible.
Quand tu sélectionnes immo tu essaie de rendre invisible sos1 qui n'existe pas et sos est déjà invisible
A aucun moment tu ne rends visible sos mais tu essaie de le rendre invisible !!
Y'a un soucis non ?

Par ailleurs dans tes fonctions tu utilises le paramètre champs et après dans le corps des fonctions tu utilises la variable sos qui n'est jamais initialisée. Donc ça ne peux pas fonctionner.
Modifié par raph (22 Jan 2008 - 09:28)
bonjour j'ai changé mais ça ne marche toujours pas, Smiley decu
Que dois je faire merci pour ton aide


<script type="text/javascript">

function Disabled(champs)
{
  var Obj = document.getElementById(champs);
  if (Obj.disabled == false)
    {Obj.disabled = true;}
  else
    {Obj.disabled = false;}
}

</script>

</head>

<body>
<form action="#">
 <select name="select2">
    <option value="01" selected="selected">voiture</option>
    <option value="02"     OnSelect="Disabled('champs1')" >immo</option>
  </select>
  <input type="radio" name="sos" value="radiobutton" id="champs1" style="display: none " />
<tr>
    
</tr>
</form>
</body>

Modifié par karenma (22 Jan 2008 - 19:31)
Il y a plusieurs choses à dire.
Premièrement, onselect, ça ne fonctionne pas. Enfin, ça ne sert pas à ce à quoi tu penses... onselect est un évênement qui se déclenche lors de la sélection d'un texte dans une textarea ou un input text.
Si tu veux faire quelque chose lors du changement de sélection d'un select, il faut faire un <select onchange=""></select>.
C'était la première chose, ensuite, ta fonction Disabled est un peu bisare. En effet, tu ne fais que changer l'était disabled, donc faire un if ne te sert à rien, un simple Obj.disabled = !Obj.disabled ; t'inversera le booléen.
Il faut aussi savoir ce que tu cherches à faire, veux-tu cacher l'élément ? Le rendre invisible ? Le rendre inmodifiable ?
Car visibility hidden, display none et disabled true sont 3 choses bien distinctes... De plus, tu peux difficilement voir si ta fonction marche étant donné que ton élément est depuis le début caché (display:none) et que ce n'est pas un disabled=false ou un visibility=visible qui va le faire apparaitre mais bel et bien un display:inline (ou block si c'est un élément type <p><div> etc...)
Et une dernière chose, getElementById ne fonctionne pas avec tous les navigateurs, il vaut mieux faire une fonction du genre 
function getElement(rid) {
         return document.getElementById ? document.getElementById(rid) : document.all(rid) ;
}


Voilà...
bonjour
tu as raison c un hidden que je veux donc j'ai changé en hidden et j'ai mis onchange et ça marche


<script type="text/javascript">
function Visible(champs)
{
  var Obj = document.getElementById(champs);
  if (Obj.style.visibility == 'hidden')
    {Obj.style.visibility = 'visible';}
  else
    {Obj.style.visibility = 'hidden';}
}
</script>
</head>

<body>
<form action="#">
 <select name="select2"  onchange="Visible('champs1')" >
    <option value="01" selected="selected">voiture</option>
    <option value="02"      >immo</option>
    <option value="03">essai</option>
  </select>
  <input type="radio" name="sos" value="radiobutton"    id="champs1" style="visibility: hidden " />
<tr>
</tr>
</form>


mais ce que j'ai oublié de préciser c'est si dans ma liste déroulante j'ai 10 trucs j'aimerais que le bouton radio n'apparaissent que pour une seule des sélections "immo"
sinon j'ai essayé de mettre 

function Visible(champs)
{
  var Obj = document.getElementById(champs);
 {Obj.style.visibility = !Obj.style.visibility;}
   
}

et ça ne marche pas

quant à l'astuce pour tous les navigateurs je n'ai rien compris

function getElement(rid) {
         return document.getElementById ? document.getElementById(rid) : document.all(rid) ;
}

comment l'intégrer à la visibility? et est ce que ça permet que ça marche avec mozilla


En fait j'avais mis select au début pour que le bouton radio n'apparaisse que pour ''immo'' mais bon tu m'as dit que onselect n'ai pas bon. comment faire alors pour que ça ne marche qu'avec "immo"?
merci d'avance pour ta réponse
"L'astuce" pour tous les navigateur consiste simplement en une fonction qui va choisir la bonne méthode à utiliser suivant ce qui est disponible avec le navigateur, pour l'utiliser, tu n'as qu'a ajouter la fonction à ton fichier javascript et remplacer tes commande document.getElementById(id) par getElement(id)... Mais bon, ce n'est pas obligatoire...

Pour que ton affichage ne se fasse que pour immo, rien de plus simple, il suffit de faire un test sur la valeur de l'index sélectionné

var mon_select = document.forms[0].elements['select2'] ;
 if (mon_select.options[mon_select.selectedIndex].firstChild.nodeValue == 'immo') {
    // tu rends visible on élément
} else {
  // Tu le rend invisible
}
bonjour
tu vas surement trouver que je suis inculte
Mais je suis très très débutante
et je ne comprends pas comment intégrer ce code dans mon menu déroulant Merci d'avance pour ton aide


function Visible(immo)
{
var Obj = document.forms[0].elements['immo'] ;

var mon_select = document.forms[0].elements['select2'] ;
 if (mon_select.options[mon_select.selectedIndex].firstChild.nodeValue == 'immo') {
    	{Obj.style.visibility = 'visible';}
} else {
 {Obj.style.visibility = 'hidden';}
 }
</script>
Il n'y a pas de honte à poser des questions, au contraire Smiley smile

Sinon déjà, on peut dire que tu n'as pas forcément besoin de ta variable champs ici vu que cette fonction est déjà "personnalisée" pour un champ particulier... Sinon on peut la réécrire en donnant la liste déroulante (le select) qu'il faut surveiller et la valeur de l'option qui va rendre visible un certain objet.
Tout ça donnerai :
<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="02">immo</option>
    <option value="03">essai</option>
  </select>
  <input type="radio" name="sos" value="radiobutton" id="champs1" style="visibility: hidden;" />
<tr>
</tr>
</form>
bonjour
merci j'ai essayé ça fonctionne !!
Et en plus j'ai regardé avec mozilla ça fonctionne aussi
Merci!
Sujet clos
Aller à