Discussion :

[kev484]

Bonjour,

J'ai crée une fonctiion JS tres simple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function update_modif()
{
  modif=document.getElementById("Modification");
  if(document.getElementById("modif_oui").checked) {
    modif.style.display="block";
  } else {
    modif.style.display="none";
  }
}
</script>

Normalement si je clique sur ma radio OUI le div avec ID=Modification drvrait s'afficher! Or il reste toujours visible meme quand NON est coché. Voila mon code HTML :

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
<div> Email :                                                                                                                                                                          
            </div>                                  
            <div id="Modification">                                 
              <label for="login"> Nouveau Email                                                                                                                                                                                                                                                                                                                                                       
              </label>                                                                                                                                                                                                                                                                                                                                                          
              <input type="text" name="email" />                                            
            </div>                <br />                                                                                                                                                      
            <div> Mot de passe :                                                                                                                                                
            </div>                                                       
            <div id="Modification">                                                         
              <div>                                                  
                <label for="login"> Nouveau mot de passe                                                                                                                                                                                                                                                                                                                                                         
                </label>                                                                                                                                                                                                                                                                                                                                                            
                <input type="text" name="mdp" />                                              
              </div>                             
              <div>                                                                    
                <label for="login"> Confirmer votre nouveau mot de passe                                                                                                                                                                                                                                                                                                                                                         
                </label>                                                                                                                                                                                                                                                                                                                                                            
                <input type="text" name="mdp" />                             
              </div>                         
            </div>                    <br />                                                        
            <div> Nombre d'annonces :                                                         
            </div><br />                                                                                                                                                
            </fieldset>                  
            <label for=""> Voulez-vous modifier vos infos ?                                                                                                                                                                                                                                                                                                                                                         
            </label>                                                                                              
            <input type="radio" name="modif" id="modif_oui" onClick="update_modif()"> Oui                   
            <input type="radio" name="modif" id="modif_non" onClick="update_modif()"   checked="checked"> Non

Merci d'avance

[Alexdezark]

Salut,

J'ai juste regardé ton script vite fait, mais il y a 2 div avec l'id "modification".

Donc ça déjà c'est suffisant pour que ça ne marche pas.

@+

PS : utilise la console d'erreurs de Firefox, je pense que ce genre d'erreur te serait signalée

[Bovino]

Attention !
Il me semble que le onclick est déclenché avant la modification effective de l'état, donc quand tu cliques, ce n'est pas le bon radio qui est coché.
Tu peux t'en rendre compte en plaçant un alert dans le onclick.

L'astuce serait de passer directement l'id à la fonction :

Code :

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

onClick="update_modif(this.id)

et de modifier ta fonction :

Code :

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

1
2
3
4
5
6
7
8
9
function update_modif(etat)
{
  modif=document.getElementById("Modification");
  if(etat=='modif_oui') {
    modif.style.display="block";
  } else {
    modif.style.display="none";
  }
}

[kev484]

Voila mon code maintenant :

Code :

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

1
2
3
4
5
6
7
8
9
10
function update_modif(etat)
{
  modif=document.getElementById("Modification");
  if(etat=='modif_oui') {
    modif.style.display="block";
  } else {
    modif.style.display="none";
  }
}
</script>

Et :

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
<div id="Modification">                                                                        
              <div>                                                                   
                <label for="mpassword"> Nouveau mot de passe                                                                                                                                                                                                                                                                                                                                                                          
                </label>                                                                                                                                                                                                                                                                                                                                                                             
                <input type="text" name="password" />                                                             
              </div>                                            
              <div>                                                                                     
                <label for="password2"> Confirmer votre nouveau mot de passe                                                                                                                                                                                                                                                                                                                                                                          
                </label>                                                                                                                                                                                                                                                                                                                                                                             
                <input type="text" name="password2" />                                            
              </div>                                      
            </div>                    <br />                                                                     
            <div> Nombre d'annonces :                                                                      
            </div><br />                                                                                                                                                             
            </fieldset>                               
            <label for=""> Voulez-vous modifier vos infos ?                                                                                                                                                                                                                                                                                                                                                                      
            </label>                                                                                                           
            <input type="radio" name="modif" id="modif_oui" onClick="update_modif(this_id)"> Oui                                
            <input type="radio" name="modif" id="modif_non" onClick="update_modif(this_id)"   checked="checked"> Non

Je n'est mis qu'un div Modification.

Helas ca ne fonctionne toujours pas..

[Bovino]

Code :

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

onClick="update_modif(this_id)

pas this_id mais this.id !

[kev484]

En fait mon code fonctionne parfaitement sous FF et non sous IE je ne comprends pas. Voila tout on code :

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
<html>                                            
  <head>                                                                          
    <title>Information Client                                                                           
    </title>                                                                          
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
<script type="text/javascript">
function update_modif()
{
  modif=document.getElementById("Modification");
  if(document.getElementById("modif_oui").checked) {
    modif.style.display="block";
  } else {
    modif.style.display="none";
  }
}
</script>                                            
  </head>                                            
  <body onload="update_modif()">
<pre>
Ecran resumant toutes les informations entrees lors de l'inscription
Possibilite de les modifier via un lien
</pre><h1>Information Client</h1>                                                                          
    <div id="main">                                                                                                        
      <fieldset style=" width: 400px;">                                                                                                                                      
        <fieldset style="margin: 10px 5px 10px 5px; padding-left: 3px; padding-bottom: 5px;">                                                                                                                                                                    
          <legend> Information sur votre soci&eacute;t&eacute;                                                                                                                                                                      
          </legend>          <br />                                                                                                                                                                    
          <div> Nom de la soci&eacute;t&eacute; :                                                                                                                                                           
          </div><br />                                                                                                                                                                    
          <div> Activit&eacute; :                                                                                                                                                           
          </div><br />                                                                                                                                                                    
          <div> Region d'implantation :                                                                                                                                                           
          </div>            <br />                                                                                                                                                                   
          </fieldset>                                                                                                                                                                    
          <fieldset style="margin: 10px 5px 10px 5px; padding-left: 3px; padding-bottom: 5px;"">                                                                                                                                                                                     
            <legend> Information compte client                                                                                                                                                                                       
            </legend>            <br />                                                                                                                                                                                                    
            <div> Email :                                                                                                                                                                                       
            </div>   
                                   <br />                                                                                                                                                                   
            <div> Mot de passe :                                                                                                                                                             
            </div>                                                                    
            <div id="Modification">                                                                        
              <div>                                                                   
                <label for="password"> Nouveau mot de passe                                                                                                                                                                                                                                                                                                                                                                          
                </label>                                                                                                                                                                                                                                                                                                                                                                             
                <input type="password" name="password" />                                                             
              </div>                                            
              <div>                                                                                     
                <label for="password2"> Confirmer votre nouveau mot de passe                                                                                                                                                                                                                                                                                                                                                                          
                </label>                                                                                                                                                                                                                                                                                                                                                                             
                <input type="password" name="password2" />                                            
              </div>                                      
            </div>                    <br />                                                                     
            <div> Nombre d'annonces :                                                                      
            </div><br />                                                                                                                                                             
            </fieldset>                               
            <label for=""> Voulez-vous modifier vos infos ?                                                                                                                                                                                                                                                                                                                                                                      
            </label>                                                                                                           
            <input type="radio" name="modif" id="modif_oui" onClick="update_modif()"> Oui                                
            <input type="radio" name="modif" id="modif_non" onClick="update_modif()"   checked="checked"> Non                                                                                                                                                     
            </fieldset>                                                                                                
    </div>                                            
  </body>
</html>

[E.Bzz]

Bon ... c'est un peu vicieux
Comme ça, ça marche :

Code :

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

1
2
3
4
5
6
7
8
9
function update_modif()
{
  la_modif=document.getElementById("Modification");
  if(document.getElementById("modif_oui").checked) {
    la_modif.style.display="block";
  } else {
    la_modif.style.display="none";
  }
}

Tout ça parce que "historiquement" (je le dis comme ça pour pas avoir à rechercher les versions concernées ), la syntaxe IE permettait de faire référence à un objet directement par son ID. Ex :

Code :

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

1
2
3
alert(Mon_champ.value);
// au lieu de 
alert(document.getElementById('Mon_champ').value);

Or, pour mémoire, IE confond allègrement name et ID ...
Or (bis) tu as dans ta page des champs

Code :

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

name="modif"

Pour IE, donc

Code :

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

modif=document.getElementById("Modification");

revient à

Code :

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

document.getElementById("modif")=document.getElementById("Modification");

ce qui ne lui plaît pas et c'est bien compréhensible.

Oualà !

A+

[Bovino]

Ah oui... j'étais passé à coté... modif est à la fois une variable et le name d'un élément de formulaire... ça perturbe beaucoup IE !
Rajoute :

Code :

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

var modif=document.getElementById("Modification");

Plus d'explications dans la FAQ !

[E.Bzz]

modif est à la fois une variable et un name

Pas besoin de continuer la phrase

(pas de <form> dans la page)

A+

[kev484]

Merci beaucoup cela fonctionne tres bien. Par contre je ne peux pas mettre plusieurs div ayant comme ID Modification?

[andry.aime]

Un id doit être unique dans toute la page. Donc non, tu ne peux pas mettre plusieurs div ayant comme ID Modification.

[kev484]

Ok donc si je veux faire apparaitre plusieurs champ je dois créer différente fonction JS?

[E.Bzz]

Ok donc si je veux faire apparaitre plusieurs champ je dois créer différente fonction JS?

Tu peux aussi gérer un compteur pour avoir
Modification_1
Modification_2 ....

Tu n'as plus qu'à passer la valeur du compteur à ta fonction suivant le champ à traiter.

A+

[kev484]

Merci beaucoup.