Afficher/cacher cases d'un formulaire

Version imprimable

12/05/2009, 16h58
bidulee

Afficher/cacher cases d'un formulaire
Bonjour,
J'ai besoin de faire apparaitre de nouvelles cases dans mon formulaire selon la sélection des précédentes.

Par exemple j'ai ce input :
Code:

1 2 3 4 5 <td><B>Opened</B></td> <td><select name="opened"> <option>false</option> <option>true</option> </select></td>
Et si c'est "true" qui est choisi, en dessous, je veux afficher de nouveaux "input".Par contre, avant sélection, on ne voit pas ces "nouveaux" input et si "false" est coché, rien ne change.

Comment dois-je faire ?
12/05/2009, 17h18
zorm

Bonjour,

Il faut pour cela créer une fonction javascript lancée avec un onchange sur ton select. Mais je dois dire que tu risques vraiment de t'embêter avec ce genre de situation car si tu rajoutes des champs à la volée, il faut aussi que tu réfléchisses bien à comment tu vas les récupérer/traiter coté serveur...

Alors, j'ai trouvé ça :

Code:

1
2
3
4
5
6
7
function visible(champs){
  var Obj = document.getElementById(champs);
  if (Obj.style.visibility == 'hidden')
    {Obj.style.visibility = 'visible';}
  else
    {Obj.style.visibility = 'hidden';}
}

Et après dans mon formulaire :

Code:

1
2
3
4
5
6
7
<tr>
            <td><B>aStocker</B></td>
            <td><select name="aStocker" onchange="visible('size1', 'xPath1','separator1','opened1','required1','readOnly1','aIndexer1','autoFilled1','baseMapping1','pTCMapping1','pTCMappingLevel1')">
            <option>false</option>
            <option>true</option>
        </select></td>
        </tr>

Avec pour chacun :

Code:

1
2
3
4
<tr>
            <td><B>Size</B></td>
            <td><input type="text" name="size" value="" id="size1" style="visibility:hidden"  /></td>
        </tr>

Ca me cache bien les champs (sauf le nom qu'il y a devant). Et quand je mets le "aStocker" à true, ça me rend visible seulement le "size" ; la suite n'apparait pas.

12/05/2009, 20h11
c_nvy

Il est normal que seul le champ size apparaisse étant donné que la fonction javascript ne s'exécute que pour un seul champ.
13/05/2009, 09h49
bidulee

Donc je dois changer ma fonction ? Ou je peux la garder mais l'utiliser autrement ?
13/05/2009, 09h58
c_nvy
Tu pourrais plus simplement mettre tous les champs que tu veux cacher dans une balise div avec un style visibility:hidden comme ceci :
Code:

1 2 3 4 <div id="formulaire" style="visibility: hidden;"> ... </div>
Ensuite, tu modifies la fonction javascript visible comme ceci :
Code:

1 2 3 4 function visible() { document.getElementById("formulaire").style.visibility="visible"; }
13/05/2009, 10h30
bidulee

Merci. Ca fonctionne avec du texte mais pas avec mes éléments. Ca les cache seulement si j'enlève les balises <tr> et <td>.
Comment ça se fait ?
13/05/2009, 11h15
c_nvy

Il faudrait mettre la balise <table> dans la balise <div>.

Alors j'ai mis une <table> dans mon <div>.
Ensuite, j'ai un peu modifié la fonction Javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script type="text/javascript"> function visible(truc) { var targetElement; targetElement=document.getElementById(truc); if (targetElement.style.display=="none"){ targetElement.style.display="";} else{ targetElement.style.display="none"; } } </script>
Et pour mon onchange j'ai mis :

Code:

onchange="javascript:visible('formulaire')"

Et ça fonctionne !!

Merci beaucoup pour ton aide