[HTML] Problème avec un formulaire

Version imprimable

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:

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

...

23/11/2007, 23h11
Kerod
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 ?

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:

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:

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

Citation:

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:

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:

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:

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:

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 !

...

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. :aie:
Maintenant voici le code corrigé sans utilisation de ton tableau, et qui fonctionne :
Code:

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:

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>

24/11/2007, 13h18
mbounou

tu rasembler les deux fonction en une seule:

Citation:

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

Citation:

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

Citation:
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. :aie:
Maintenant voici le code corrigé sans utilisation de ton tableau, et qui fonctionne :
Code:

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:

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 :

http://img232.imageshack.us/img232/722/blablamm2.jpg

et le code :
Code:

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 :oops: 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 :)

...

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

Utilise ce code :
Code:

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

Et n'oublie pas qu'il faut retirer le mélange du HTML et XHTML. Choisi ton doctype et modifie le code pour qu'il soit valide W3C

Citation:
Envoyé par Kerod
Cet effet est normal dans un tableau et surtout avec l'utilisation de block.

Utilise ce code :
Code:

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

Et n'oublie pas qu'il faut retirer le mélange du HTML et XHTML. Choisi ton doctype et modifie le code pour qu'il soit valide W3C
merci beaucoup ca marche, mais sincerement je ne connais pas la difference entre XHTML et HTML, ni les conséquences du melange des deux :oops:

...

24/11/2007, 17h53
Kerod

Pour voir ce qu'est le HTML : HTML
ET le XHTML : XHTML

;)
24/11/2007, 20h49
Mo_Poly

merci :)

...