[HTML] Problème avec un formulaire

**Mo_Poly** · 23/11/2007, 22h42

Salut,

j'ai une page php contenant du code html (un formulaire), à une partie de mon code qui génére le formulaire, j'ai ca :

Code :

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

1
2
3
4
5
6
7
8
<TR>
	<TD>Page web personnelle</TD>
	<TD>
	<input type=\"checkbox\" name=\"type[]\" value=\"Aucune\" > 
	<input type=\"checkbox\" name=\"type[]\" value=\"Automatique\" > 
	<input type=\"checkbox\" name=\"type[]\" value=\"Externe\" > 
	</TD>
</TR>

Je souhaite que quand l'utilisateur choisi l'option Externe ou Automatique, un Input de type text s'ajoute au formulaire directement, et je n'ai aucune idée sur comment faire cela

merci de m'aider

...

**Kerod** · 23/11/2007, 23h11

Tu as plusieurs solutions :

La plus simple mettre un input à display none et l'afficher lors du clic
Créer avec du javascript ton input.

Que préfères-tu ?

**fayred** · 23/11/2007, 23h11

Bonjour,

moi je gère ce genre de choses grâce à des blocs cachés que j'affiche via javascript lors d'un onclick. Je ne sais pas si c'est le mieux mais ça marche pas mal!

Code :

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

1
2
3
4
5
6
7
 
<input type=\"checkbox\" name=\"type[]\" value=\"Automatique\" >  onclick=\"afficher(leDivAAfficher);\" >
 
      <div id="leDivAAfficher" style="display:  none;">
 
        <input type="text" ...>
    </div>

le js :

Code :

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

1
2
3
4
5
 
function afficher(leDivAAfficher)
{
    document.getElementById(leDivAAfficher).style.display = "block";
}

(Un truc du genre)

Et pour le faire disparaitre quand tu cliques sur la checkbox aucune,fais une fonction cacher().

En esperant avoir pu t'aider, bonne soirée

EDIT : me suis fait griller...!

**Mo_Poly** · 24/11/2007, 02h55

Envoyé par fayred

Bonjour,

moi je gère ce genre de choses grâce à des blocs cachés que j'affiche via javascript lors d'un onclick. Je ne sais pas si c'est le mieux mais ça marche pas mal!

Code :

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

1
2
3
4
5
6
7
 
<input type=\"checkbox\" name=\"type[]\" value=\"Automatique\" >  onclick=\"afficher(leDivAAfficher);\" >
 
      <div id="leDivAAfficher" style="display:  none;">
 
        <input type="text" ...>
    </div>

le js :

Code :

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

1
2
3
4
5
 
function afficher(leDivAAfficher)
{
    document.getElementById(leDivAAfficher).style.display = "block";
}

(Un truc du genre)

Et pour le faire disparaitre quand tu cliques sur la checkbox aucune,fais une fonction cacher().

En esperant avoir pu t'aider, bonne soirée

EDIT : me suis fait griller...!

en fait c'est des radiobutton et non des checkboxs, je me suis trempé..

j'ai essayé ta solution, mais ca na pas marché, voici mon 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
<TR>
	<TD>Page web personnelle</TD>
	<TD>
	<input type=\"radio\" name=\"type[]\" value=\"Aucune\"  onclick=\"cacher(leDivAAfficher);\" > Aucune <br/>
	<input type=\"radio\" name=\"type[]\" value=\"Automatique\"  onclick=\"cacher(leDivAAfficher);\" > Automatique <br/>
	<input type=\"radio\" name=\"type[]\" value=\"Externe\"   onclick=\"afficher(leDivAAfficher);\" > Externe <br/>
 
    <div id=\"leDivAAfficher\" style=\"display:  none;\">
       	<TD>Lien externe</TD>
		<TD>
        <input type=\"text\" name=\"pweb\">
		</TD>
    </div>
	</TD>
</TR>

avec les function javascript dans le <head>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
                function afficher(leDivAAfficher)
                {
                        document.getElementById(leDivAAfficher).style.display = "block";
                }
</script>
 
<script type="text/javascript">
                function cacher(leDivAAfficher)
                {
                        document.getElementById(leDivAAfficher).style.display = "none";
                }
</script>

le input ne disparait jamais, en fait il est toujours la dés le debut !

...

**Kerod** · 24/11/2007, 04h05

Alors avant de donner une solution je vais commenter ce que tu as fait pour que tu vois tes erreurs.

Ne jamais recopier un code sans modifier sans contenu (surtout avant ne pas avoir compris). Je dis ça à cause de la présence des \ avant chaque ". Ceci vient certainement d'un code PHP que le membre devait avoir.
Quand on passe un identifiant (id) à une fonction ce doit toujours être en tant que chaîne de caractères. Dans le cas contraire ce sera pas pris en compte.
Côté architecture de l'HTML ce n'est pas correct d'imbriquer un td dans un div. Le parent d'un td doit toujours être un tr et rien d'autres (donc si tu devais passer la validation W3C ça ne serait pas correct.
(Ce n'est pas vraiment une erreur mais bon) Dans le head, lorsque tu déclares un script ce n'est pas nécessaire de faire plusieurs fois la définition du script. Je parle du <script....>
Attention, tu mélanges du HTML et du XHTML. Tu dois faire un choix.

Maintenant voici le code corrigé sans utilisation de ton tableau, et qui fonctionne :

Code html :

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

1
2
3
4
5
6
7
<input type="radio" name="type[]" value="Aucune" checked="checked" onclick="cacher('leDivAAfficher');" /> Aucune <br/>
    <input type="radio" name="type[]" value="Automatique"  onclick="afficher('leDivAAfficher');" /> Automatique <br/>
    <input type="radio" name="type[]" value="Externe"   onclick="afficher('leDivAAfficher');" /> Externe <br/>
 
    <div id="leDivAAfficher" style="display:  none;">
        <input type="text" name="pweb" />
    </div>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
        function afficher(leDivAAfficher)
        {
            document.getElementById(leDivAAfficher).style.display = "block";
        }
        function cacher(leDivAAfficher)
        {
            document.getElementById(leDivAAfficher).style.display = "none";
        }
</script>

**mbounou** · 24/11/2007, 13h18

tu rasembler les deux fonction en une seule:

//afficher cacher un champ
function showhide(vari){
if (vari.style.display=="none"){
vari.style.display="";
}else{
vari.style.display="none";
}
}

dans ton formulaire tu met ça:

<span onClick="showhide(champ)" style="cursor:hand" >showhide</span>
<span id="champ" style="display:none;">
<input name="fichier" type="text" size="20">
</span>

c'est testé et ça marche bien.

**Mo_Poly** · 24/11/2007, 16h13

Envoyé par Kerod

Alors avant de donner une solution je vais commenter ce que tu as fait pour que tu vois tes erreurs.

Ne jamais recopier un code sans modifier sans contenu (surtout avant ne pas avoir compris). Je dis ça à cause de la présence des \ avant chaque ". Ceci vient certainement d'un code PHP que le membre devait avoir.
Quand on passe un identifiant (id) à une fonction ce doit toujours être en tant que chaîne de caractères. Dans le cas contraire ce sera pas pris en compte.
Côté architecture de l'HTML ce n'est pas correct d'imbriquer un td dans un div. Le parent d'un td doit toujours être un tr et rien d'autres (donc si tu devais passer la validation W3C ça ne serait pas correct.
(Ce n'est pas vraiment une erreur mais bon) Dans le head, lorsque tu déclares un script ce n'est pas nécessaire de faire plusieurs fois la définition du script. Je parle du <script....>
Attention, tu mélanges du HTML et du XHTML. Tu dois faire un choix.

Maintenant voici le code corrigé sans utilisation de ton tableau, et qui fonctionne :

Code html :

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

1
2
3
4
5
6
7
<input type="radio" name="type[]" value="Aucune" checked="checked" onclick="cacher('leDivAAfficher');" /> Aucune <br/>
    <input type="radio" name="type[]" value="Automatique"  onclick="afficher('leDivAAfficher');" /> Automatique <br/>
    <input type="radio" name="type[]" value="Externe"   onclick="afficher('leDivAAfficher');" /> Externe <br/>
 
    <div id="leDivAAfficher" style="display:  none;">
        <input type="text" name="pweb" />
    </div>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
        function afficher(leDivAAfficher)
        {
            document.getElementById(leDivAAfficher).style.display = "block";
        }
        function cacher(leDivAAfficher)
        {
            document.getElementById(leDivAAfficher).style.display = "none";
        }
</script>

En fait les slash c'est parce que c'est un code php, l'erreur c'etait que le paramétre doit etre une chaine de caractere, mais un dernier probléme que j'ai , je te montre un screenshot :

et le 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
<TR>
	<TD>Page web personnelle</TD>
	<TD>
	<input type=\"radio\" name=\"type[]\" value=\"Aucune\"  onclick=\"cacher('leDivAAfficher');\" > Aucune <br/>
	<input type=\"radio\" name=\"type[]\" value=\"Automatique\"  onclick=\"cacher('leDivAAfficher');\" > Automatique <br/>
	<input type=\"radio\" name=\"type[]\" value=\"Externe\"   onclick=\"afficher('leDivAAfficher');\" > Externe <br/>
	</TD>
</TR>
<TR id=\"leDivAAfficher\" style=\"display:  none;\">
    <TD>Lien Externe</TD>
	<TD>
        <input type=\"text\" name=\"pweb\">
    </TD>
</TR>

c'est le probléme de l'allignement

je n'arrive pas à le regler !!! les input ne sont pas allignés , enfin ... c'est le input qui s'ajoute qui n'est pas alligné avec les autres

merci

...

**Kerod** · 24/11/2007, 16h38

Cet effet est normal dans un tableau et surtout avec l'utilisation de block.

Utilise ce code :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
        function afficher(leDivAAfficher)
        {
            document.getElementById(leDivAAfficher).style.display = "";
        }
        function cacher(leDivAAfficher)
        {
            document.getElementById(leDivAAfficher).style.display = "none";
        }
</script>