[mise à jour tableau en fonction du button radio]

**Lady_jade** · 21/10/2005, 16h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Mr N.** · 21/10/2005, 16h16

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 !)

**Lady_jade** · 21/10/2005, 16h34

c'est sur que c'est parfait!!

Merci

**Lady_jade** · 21/10/2005, 17h17

ç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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!!

**Mr N.** · 21/10/2005, 17h22

Boule de cristal, Ô boule de cristal ! Peux tu me donner l'erreur qu'a obtenu Lady_jade ?

**Lady_jade** · 21/10/2005, 17h33

la boule de cristal de voit rien

puisque rien ne s'affiche ;o)

suivant que quand je mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

**Mr N.** · 21/10/2005, 17h40

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

**Mr N.** · 21/10/2005, 17h49

On efface tout et on recommence :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Lady_jade** · 21/10/2005, 17h50

oui oui oups

j'ai

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
'document.form1.nbimg[...].checked' a la valeur null ou n'est pas un objet

et donc ma page est vide

**Lady_jade** · 24/10/2005, 09h14

merci du coup de main ça marche

**kileak** · 30/12/2005, 11h41

Envoyé par Lady_jade

merci du coup de main ça marche

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Et là ca marche !
a+

[mise à jour tableau en fonction du button radio]

JavaScript

Discussions similaires

Partager

Partager