[mise à jour tableau en fonction du button radio]

Version imprimable

je souhaite faire l'apparition d'un tableau ou de l'autre en fonction du bouton radio choisi, voilà ce que j'ai fait:

Code:

1
2
3
4
5
6
7
8
9
10
 
<script language="javascript">
function AffichTab(element)
{
if (f.radiobutton.value == "Tavail")
	{
		document.getElementById('element').visible='true';
	}
}
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<form name="f">
  <table width="200" border="1">
  <tr class="corpsTexte">
    <td width="70"><input type="radio" name="radiobutton" value="Tavail" onClick="AffichTab(TabHoraire)">
Trav.</td>
    <td width="70"><input type="radio" name="radiobutton" value="Absence" onClick="AffichTab(TabAbsence)">
Abs.</td>
  </tr>
</table>
 
  <table width="200" border="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
 
  <table id="TabHoraire" width="200" border="1" style=" visibility:hidden">
    <tr class="TitreCorps">
      <td>Abv</td>
      <td width="154">Profil Horaire </td>
    </tr>
    <tr>
      <td width="30"><div align="center">
        <input type="text" border="0" name="Profil" value="" style="cursor:pointer" size="3">
      </div></td>
      <td width="154"><div align="center"></div></td>
    </tr>
  </table>
  <table id="TabAbsence" width="200" border="1" style=" visibility:hidden">
    <tr class="TitreCorps">
      <td>Abv</td>
      <td>Type d'Abscence </td>
    </tr>
    <tr>
      <td width="30"><div align="center">
          <input type="text" border="0" name="Absence" value="" style="cursor:pointer" size="3">
      </div></td>
      <td width="154"><div align="center"></div></td>
    </tr>
  </table>
</form>

N'étant pas très experte en javascript, toute l'aide que vous m'apporterez sera la bien venue. :wink:

21/10/2005, 16h16
Mr N.

Cadeau, j'ai cherché pour toi ;)
http://www.developpez.net/forums/viewtopic.php?t=409314
(Regarde à la fin, il y a une proposition qui tient la route, à adapter suivant tes besoins bien sur !)
21/10/2005, 16h34
Lady_jade

c'est sur que c'est parfait!!

Merci

ça marche bien sauf que lorsque je mets un input type=text dans mon div j'ai une erreur que je n'ai plus lorque j'enlève cet input.

Mais j'ai absolument besoin de l'input type=text!!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<html> 
   <script language="javascript"> 
      var iscomplete = false; 
 
      function checkform5() 
      { 
         iscomplete = false; 
         varnb = 0; 
         for (i=0;i<=document.form1.elements.length-1;i++) 
         { 
            if (document.form1.nbimg[i].checked == true) 
            { 
               iscomplete = true; 
               varnb = i + 1; 
            } 
         } 
 
         switch (varnb) 
         { 
            case 1: 
               cache1.style.visibility="VISIBLE"; 
               cache2.style.visibility="HIDDEN"; 
               cache3.style.visibility="HIDDEN"; 
               break; 
            case 2: 
               cache1.style.visibility="HIDDEN"; 
               cache2.style.visibility="VISIBLE"; 
               cache3.style.visibility="HIDDEN"; 
               break; 
            case 3: 
               cache1.style.visibility="HIDDEN"; 
               cache2.style.visibility="HIDDEN"; 
               cache3.style.visibility="VISIBLE"; 
               break; 
         } 
      } 
   </script> 
 
   <body> 
<form name="form1">
<table width="200" border="1">
  <tr class="corpsTexte">
    <td width="70"><input type="radio" name="nbimg" value="1" onClick="checkform5()" >Trav.</td>
    <td width="70"><input type="radio" name="nbimg" value="2" onClick="checkform5()">Abs.</td>
  </tr>
</table> 
<table width="200" border="0">
  <tr><td>&nbsp;</td></tr>
</table>      
<div id="cache1" style="visibility:hidden;">
  <table width="200" border="1">
    <tr class="TitreCorps">
      <td>Abv</td>
      <td width="154">Profil Horaire </td>
    </tr>
	<tr>
      <td width="30" height="24"><input type="text" border="0" name="Profil" value="" style="cursor:pointer" size="3"></td>
      <td width="154"><div align="center"></div></td>
    </tr>
 
  </table>
</div> 
<div id="cache2" style="visibility:hidden;">Div2</div> 
<div id="cache3" style="visibility:hidden;">Div3</div> 
</form> 
</body> 
</html>

please je sèche!!

21/10/2005, 17h22
Mr N.

Boule de cristal, Ô boule de cristal ! Peux tu me donner l'erreur qu'a obtenu Lady_jade ?
21/10/2005, 17h33
Lady_jade
la boule de cristal de voit rien

puisque rien ne s'affiche ;o)

suivant que quand je mets
Code:

1 2 <input type="text" border="0" name="Profil" value="" style="cursor:pointer" size="3">
j'ai une page blanche

et qd j'enlève ça mache???

et oui j'ai fais attention à la fermeture de me balises!
:oops:
21/10/2005, 17h40
Mr N.

Citation:

Envoyé par Lady_jade

lorsque je mets un input type=text dans mon div j'ai une erreur

Désolé je me base sur ce que tu me donnes ;)

On efface tout et on recommence :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script type="text/javascript">
function AffichTab(table)
{
  	document.getElementById('TabHoraire').style.display = 'none';
  	document.getElementById('TabAbsence').style.display = 'none';
  	document.getElementById(table).style.display        = 'block';
} 
</script>
 
<form name="f">
  <table width="200" border="1">
  <tr class="corpsTexte">
    <td width="70"><input type="radio" name="radiobutton" value="Tavail" onClick="AffichTab('TabHoraire');">
Trav.</td>
    <td width="70"><input type="radio" name="radiobutton" value="Absence" onClick="AffichTab('TabAbsence');">
Abs.</td>
  </tr>
</table>
 
  <table width="200" border="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
 
  <table id="TabHoraire" width="200" border="1" style="display:none">
    <tr class="TitreCorps">
      <td>Abv</td>
      <td width="154">Profil Horaire </td>
    </tr>
    <tr>
      <td width="30"><div align="center">
        <input type="text" border="0" name="Profil" value="" style="cursor:pointer" size="3">
      </div></td>
      <td width="154"><div align="center"></div></td>
    </tr>
  </table>
  <table id="TabAbsence" width="200" border="1" style="display:none">
    <tr class="TitreCorps">
      <td>Abv</td>
      <td>Type d'Abscence </td>
    </tr>
    <tr>
      <td width="30"><div align="center">
          <input type="text" border="0" name="Absence" value="" style="cursor:pointer" size="3">
      </div></td>
      <td width="154"><div align="center"></div></td>
    </tr>
  </table>
</form>

C'est codé bourrin, à toi de rendre ca plus propre !

HTH

oui oui oups
:?
j'ai
Code:

1 2 'document.form1.nbimg[...].checked' a la valeur null ou n'est pas un objet
et donc ma page est vide :oops:

24/10/2005, 09h14
Lady_jade

merci du coup de main ça marche :wink:
30/12/2005, 11h41
kileak

Citation:

Envoyé par Lady_jade

merci du coup de main ça marche :wink:

Salut,

ça marche sous Firefox ?

Parce que j'ai le même genre de code que toi et sous IE ok mais sous Firefox, le tableau apparait bien mais la taille des cellules (propriété width) n'est plus du tout respectée quand je fais block.
Du coup, je fais :

Code:

document.getElementById(table).style.display = '';

Et là ca marche !
a+