[?] Formulaire alternatif ! Qui apparauit suivant une option choisie !

Formulaire alternatif ! Qui apparauit suivant une option choisie ! [?] - HTML/CSS - Programmation

Marsh Posté le 03-02-2003 à 20:49:02    

j'ai une page formulaire.php, avec, bien sur un formulaire  :D Je souhaiterai que des option apparaisse si au préalable on a choisi "oui" a une case radio (si "non" qu'il affiche pas ces champs)...
 
Enfin, je parle la d'une case radio, mais ca peut etre une liste déroulante, and co... Mais, comment faire cela ? Je suppose avec du javascript ? Mais je connais aps ce langage, si c'est simple, quelqu'un pourrais t'il me donner le code ?
 
Merci  :hello:

Reply

Marsh Posté le 03-02-2003 à 20:49:02   

Reply

Marsh Posté le 03-02-2003 à 21:08:20    

Tu mets les champs que tu veux voir apparaitre ou non dans des div.
 
ex dans un tableau :

Code :
  1. <div id="informationLayer">
  2. <table>
  3.   <tr>
  4.     <td>information...</td>
  5.   </tr>
  6. </table>
  7. </div>


 
ensuite, dans ta case radio ou dans ta combo, tu appelles une fonction ex : 'afficheInfo()'
 
et dans ta fonction tu fais un truc du genre
<script>
 function afficheInfo()
 {
   suivant valeur..
   document.getElementById"informationLayer" ).style.display="none";
ou  
document.getElementById"informationLayer" ).style.display="";
 }
</script>  


Message édité par walli le 03-02-2003 à 21:14:04
Reply

Marsh Posté le 03-02-2003 à 21:18:02    

Enfait voila mon cas exactement :
 
Je veux afficher TOUT les formulaires au départ (avec l'imput déterminant sélectionné par défault pour "oui" ), mais, si ce derneir est changé pour "non", alors, il supprime 2/3 champs du formulaire...
 
Etant un vrai n00bs en javascript, je peux pas me servir de ton code walli, mais meric pour ta partiipation, jvé essayer de comprnedre qd meme  :whistle:

Reply

Marsh Posté le 03-02-2003 à 21:34:14    

rainckill a écrit :

Enfait voila mon cas exactement :
 
Je veux afficher TOUT les formulaires au départ (avec l'imput déterminant sélectionné par défault pour "oui" ), mais, si ce derneir est changé pour "non", alors, il supprime 2/3 champs du formulaire...
 
Etant un vrai n00bs en javascript, je peux pas me servir de ton code walli, mais meric pour ta partiipation, jvé essayer de comprnedre qd meme  :whistle:  


 
On peut y aller petit à petit si tu veux en regardant un peu ton code !

Reply

Marsh Posté le 03-02-2003 à 21:48:53    

walli a écrit :


 
On peut y aller petit à petit si tu veux en regardant un peu ton code !
 


 
Oki, merci bien  :jap:
Donc, enfait, c'est un code tous simple de formulaire html :
 

Code :
  1. <FORM ENCTYPE="multipart/form-data" action="uploadimg.php" method="post">
  2. <b>Uploader une image !</b><br>
  3. <table cellpadding='0' cellspacing='0'>
  4. <tr><td>Faire profiter de ce fichier :</td>
  5. <td><input type="radio" name="profite" value="oui" checked> oui <input type="radio" name="profite" value="non"> non</td></tr>
  6.     <tr><td>Nom de l'image :</td>
  7. <td><input type="text" name="nomimg" size="20"></td></tr>
  8. <tr><td>Catégorie<br><font size="1">(à ignorer si vous avez répondu "non" précédemment)   </font></td>
  9. <td><select name="catimg">
  10. <option value="vide"> ------- Choisissez -------</option>
  11. <option value="Adulte"> Adulte</option>
  12. <option value="Jeux"> Jeux</option>
  13. <option value="Film/Anime"> Film/Anime</option>
  14. <option value="Sport"> Sport</option>
  15. <option value="Autre"> Autre</option>
  16. </select>
  17. </td></tr>
  18. <tr><td>Chemin du fichier :</td>
  19. <td><INPUT NAME="userimg" TYPE="file"></td></tr>
  20. <tr><td><center><input type="submit" value="Envoyer !"></center></td></tr>
  22. </table>


 
scuz, ia des table, td, et tr :-/
 
Bon, comme tu le voit, le radio est sur "oui"... => il y a els champs nomimg, et catimg qui apparaisse... par contre, j'aimerai que sie un membre choisisse "non" finalement, les champs cat (select) et nom (imput type text) disparaisse...

Reply

Marsh Posté le 03-02-2003 à 23:13:18    

Voilà, ça va te donner qqchose dans le genre !
 

Code :
  1. <html>
  2. <head>
  3. <script language="JavaScript" >
  4. function visible()
  5. {
  6.   document.getElementById("layer" ).style.display="";
  7. }
  8. function invisible()
  9. {
  10.   document.getElementById("layer" ).style.display="none";
  11. }
  12. </script>
  13. </head>
  15. <body>
  16. <table cellpadding='0' cellspacing='0'>
  17.    <tr><td>Faire profiter de ce fichier :</td>
  18.    <td>
  19. <input type="radio" name="profite"  value="oui" checked onclick="visible();"> oui <input type="radio" name="profite"  value="non"  onclick="invisible()";> non</td></tr>
  20. <tr><td>
  21.       <div id="layer"><table><tr><td>Nom de l'image :</td>
  22.    <td><input type="text" name="nomimg" size="20"></td></tr>
  23.   <tr><td>Catégorie<br><font size="1">(à ignorer si vous avez répondu "non" précédemment)   </font></td>
  24.    <td><select name="catimg">
  25.    <option value="vide"> ------- Choisissez -------</option>
  26.    <option value="Adulte"> Adulte</option>
  27.    <option value="Jeux"> Jeux</option>
  28.    <option value="Film/Anime"> Film/Anime</option>
  29.    <option value="Sport"> Sport</option>
  30.    <option value="Autre"> Autre</option>
  31.   </select>
  32.   </td></tr>
  33.    <tr><td>Chemin du fichier :</td>
  34.    <td><INPUT NAME="userimg" TYPE="file"></td></tr>
  35.    <tr><td><center><input type="submit" value="Envoyer !"></center></td></tr></table>
  36.     </div></td></tr>
  37.   </table>
  38. </body>
  40. </html>


 
je sais pas exactement ce que tu veux cacher, mais ça te donnera une idée du code.

Reply

Marsh Posté le 04-02-2003 à 18:45:53    

Oki, ca amrche impecable, merci ! j'ai un peu modifier le code mais la, c'est nickel ^^
 
merci wally ^^

Reply

Marsh Posté le 07-03-2003 à 10:00:07    

excusez moi...  
 
Comment on peut faire la meme chose avec un bouton checkbox?
car la, c'est pas une case oui et une case non
mais la meme case oui ou non en fonction de la valeur que c'était...
J'ai essayé plusieurs trucs de "débrouille" mais ça ne marche pas...
Pouvez vous m'aider?

Reply

Marsh Posté le 07-03-2003 à 10:30:13    

c'est correct ça au niveau de la syntaxe?
merci :-)  
 

Code :
  1. <html>
  2.   <head>
  3.   <script language="JavaScript" >
  4.   function visible()
  5.   { 
  6.       document.getElementById("layer" ).style.display="";
  7.   }
  8.   function invisible()
  9.   { 
  10.       document.getElementById("layer" ).style.display="none";
  11.   }
  12.   function affichage()
  13.   {
  14.   if (document.formulaire.entreprise.checked) invisible()
  15.   else visible();
  16.   }
  17.   </script>
  18.   </head>
  19.  
  20.   <body>
  21.   <form name="formulaire">
  22.   <table cellpadding='0' cellspacing='0'>
  23.   <td>Je m'inscris au nom d'une entreprise :</td>
  24.   <td> <input type="checkbox" name="entreprise" onclick="affichage();"
  25.        <? if($entreprise=="1" ) echo "CHECKED"; ?>
  26.           value="1" /></td>
  27.   <tr><td>
  28.   <div id="layer"><table>
  29.   <!--NOM ENTREPRISE-->
  30.           <tr>
  31.           <td>Nom entreprise:</td>
  32.           <td><input type="text" name="nom_ent" value="<?php echo $nom_ent ?>"></td>
  33.           </tr>
  34.       </table>
  35.       </div></td></tr>
  36.     </table>
  37.     </form>
  38.   </body>
  39.  
  40.   </html>

Reply

Marsh Posté le 07-03-2003 à 10:35:11    

fbthereturn a écrit :

excusez moi...  
 
Comment on peut faire la meme chose avec un bouton checkbox?
car la, c'est pas une case oui et une case non
mais la meme case oui ou non en fonction de la valeur que c'était...
J'ai essayé plusieurs trucs de "débrouille" mais ça ne marche pas...
Pouvez vous m'aider?


 
tu mets une id différente pour chacun de tes boutons checkbox.
et sur les évènements OnClick ou OnChange de tes checkbox, tu appelles une fonction unique.
dans ta fonction, tu regardes la valeur de ta checkbox (checked ou pas) et suivant la valeur tu vas cacher ou afficher les champs que tu veux.
ex :  
une checkbox qui a pour id : 'checkbox1'
et deux champs qui ont pour id 'champ1' et 'champ2'
dans ta méthode :  

Code :
  1. if document.getElementById('checkbox1').checked='true'
  2. {
  3.     document.getElementById('champ1').style.display="";
  4.     document.getElementById('champ2').style.display="none";
  5. }

Reply

Marsh Posté le 07-03-2003 à 10:35:11   

Reply

Marsh Posté le 07-03-2003 à 11:15:47    

je n'ai pas bien compris pour les champs.. à quoi ils correspondent...
 
mais j'ai fait ça:  
et le problème c'est que je ne peux cliquer qu'une fois
ensuite, le bouton checkbox reste bloqué sur "sélectionné"
 

Code :
  1. <html>
  2.   <head>
  3.   <script language="JavaScript" >
  4.   function visible()
  5.   { 
  6.       document.getElementById("layer" ).style.display="";
  7.   }
  8.   function invisible()
  9.   { 
  10.       document.getElementById("layer" ).style.display="none";
  11.   }
  12.   function affichage()
  13.   {
  14.   if (document.getElementById("essai" ).checked='true') invisible()
  15.   else visible();
  16.   }
  17.   </script>
  18.   </head>
  19.  
  20.   <body>
  21.   <form name="formulaire">
  22.   <table cellpadding='0' cellspacing='0'>
  23.   <td>Je m'inscris au nom d'une entreprise :</td>
  24.   <td> <input type="checkbox" id="essai" name="entreprise" onclick="affichage();"
  25.        <? if($entreprise=="1" ) echo "CHECKED"; ?>
  26.           value="1" /></td>
  27.   <tr><td>
  28.   <div id="layer"> <table>
  29.   <!--NOM ENTREPRISE-->
  30.           <tr>
  31.           <td>Nom entreprise:</td>
  32.           <td><input type="text" name="nom_ent" value="<?php echo $nom_ent ?>"></td>
  33.           </tr>
  34.       </table>
  35.       </div></td></tr>
  37.     </form>
  38.   </body>
  39.  
  40.   </html>

Reply

Marsh Posté le 07-03-2003 à 11:18:12    

Essaye avec  

Code :
  1. function affichage()
  2.     {
  3.       if (document.getElementById("essai" ).checked=='true') invisible()
  4.         else visible();
  5.       }

Reply

Marsh Posté le 07-03-2003 à 11:19:53    

c'est bon, dans le javascript, il ne faut pas mettre le ".checked='true'"
juste ".checked"
 
désolé, je ne connais pas le javascript

Reply

Marsh Posté le 07-03-2003 à 11:28:42    

Je suis vraiment embetant:  
 
Toutes les solutions marchaient a part
mais je n'arrive pas à l'integrer dans mon grand formulaire...
 
regarder mon formulaire...
vous pouvez faire copier coller pour l'essayer :
Tous les champs à partir du choix "vous vous inscrivez au nom d'une entreprise" ne sont plus alignés (désolé, je n'y arrive pas)
 
et le champ "nom de l'entreprise" ne disparait pas au click... :-(
 

Code :
  1. <html>
  3. <head>
  4. <title>Sans Titre</title>
  5. </head>
  6. <body bgcolor="#FFFFFF">
  7. <script language="Javascript">
  8.   function visible()
  9.   { 
  10.       document.getElementById("layer" ).style.display="";
  11.   }
  12.   function invisible()
  13.   { 
  14.       document.getElementById("layer" ).style.display="none";
  15.   }
  16.   function changeaffichage()
  17.   {
  18.   if (document.getElementById("bouton" ).checked) invisible()
  19.   else visible();
  20.   }
  21. </script>
  22. <!--Début du formulaire-->
  23. <form action="?" method="post">
  24. <table cellpadding="0" cellspacing="0" border="0">
  25. <!--NOM-->
  26. <tr>
  27. <td>Nom :</td>
  28. <td><input type="text" name="nom" value="<?php echo $nom ?>"></td>
  29. </tr>
  30. <!--PRENOM-->
  31. <tr>
  32. <td>Prénom :</td>
  33. <td><input type="text" name="prenom" value="<?php echo $prenom ?>"></td>
  34. </tr>
  35. <!--ADRESSE-->
  36. <tr>
  37. <td>Adresse :</td>
  38. <td><input type="text" name="adresse" value="<?php echo $adresse ?>"></td>
  39. </tr>
  40. <!--CODE POSTAL-->
  41. <tr>
  42. <td>Code postal :</td>
  43. <td><input type="text" name="code_postal" value="<?php echo $code_postal ?>"></td>
  44. </tr>
  45. <!--VILLE-->
  46. <tr>
  47. <td>Ville :</td>
  48. <td><input type="text" name="ville" value="<?php echo $ville ?>"></td>
  49. </tr>
  50. <!--PAYS-->
  51. <tr>
  52. <td>Pays :</td>
  53. <td>                             
  54. <select name="pays" size="1">
  55. <option value="france" <?php if($pays=="france" ) echo "SELECTED";?> >France </option>
  56. <option value="zone1" <?php if($pays=="zone1" ) echo "SELECTED";?>>europe proche</option>
  57. <option value="zone2" <?php if($pays=="zone2" ) echo "SELECTED";?>>europe lointaine</option>
  58. <option value="zone3" <?php if($pays=="zone3" ) echo "SELECTED";?>>pays hors europe</option>
  59. </select>
  60. </td>
  61. </tr>
  62. <!--ENTREPRISE-->
  66. <tr>
  67. <td>Je m'inscris au nom d'une entreprise :</td>
  68. <td> <input id="bouton" type="checkbox" name="entreprise" onclick="changeaffichage();"
  69. <? if($entreprise=="1" ) echo "CHECKED"; ?>
  70.        value="1" /></td>
  71. </tr>
  74.   <div id="layer"><table>
  75.   <!--NOM ENTREPRISE-->
  76.           <tr>
  77.           <td>Nom entreprise:</td>
  78.           <td><input type="text" name="nom_ent" value="<?php echo $nom_ent ?>"></td>
  79.           </tr>
  80.       </table>
  81.       </div>
  85. <!--MAILING LIST-->
  86. <tr>
  87. <td>Je m'inscris à la newsletter de cette boutique :</td>
  88. <td> <input type="checkbox" name="mailing_list"
  89. <? if($mailing_list=="1" ) echo "CHECKED"; ?>
  90.        value="1" /></td>
  91. </tr>
  92. <!--EMAIL-->
  93. <tr>
  94. <td>Email :</td>
  95. <td><input type="text" name="email" value="<?php echo $email ?>"></td>
  96. </tr>
  97. <!--MOT DE PASSE-->
  98. <tr>
  99. <td>Mot de passe :</td>
  100. <td><input type="password" name="mot_de_passe" value="<?php echo $mot_de_passe?>"="10" maxlength="10" /></td>
  101. </tr>
  102. <tr>
  103. <td>Veuillez reécrire le Mot de passe :</td>
  104. <td><input type="password" name="mot_de_passe1" value="<?php echo $mot_de_passe1?>"="10" maxlength="10" /></td>
  105. </tr>
  106. <!--TELEPHONE PERSONNEL-->
  107. <tr>
  108. <td>Téléphone personnel:</td>
  109. <td><input type="text" name="tel_perso" value="<?php echo $tel_perso ?>"></td>
  110. </tr>
  111. <!--TELEPHONE AUTRE-->
  112. <tr>
  113. <td>Téléphone autre:</td>
  114. <td><input type="text" name="tel_autre" value="<?php echo $tel_autre ?>"></td>
  115. </tr>
  116. <!--TELECOPIE-->
  117. <tr>
  118. <td>Télécopie :</td>
  119. <td><input type="text" name="telecopie" value="<?php echo $telecopie ?>"></td>
  120. </tr>
  121. <tr>
  122. <td><input type="submit" name="envoyer" value="soumettre !">
  123. <input type="Reset" name="effacer" value="effacer">
  124. </td>
  125. </tr>
  126. </table>
  127. </form>
  131. </body>
  133. </html>


Message édité par fbthereturn le 07-03-2003 à 11:40:22
Reply

Marsh Posté le 07-03-2003 à 12:03:27    

c un probleme avec <div id="layer">
quand je le mets dans la zone texte de l'entreprise, ça marche, ça enleve bien la zone text...
(mais pas le texte "nom de l'entreprise"...
 
c'est peut etre pas div qu'il faut utiliser..?

Reply

Marsh Posté le 07-03-2003 à 12:14:08    

fbthereturn a écrit :

c un probleme avec <div id="layer">
quand je le mets dans la zone texte de l'entreprise, ça marche, ça enleve bien la zone text...
(mais pas le texte "nom de l'entreprise"...
 
c'est peut etre pas div qu'il faut utiliser..?


 
si faut utiliser le div.
le probleme avec le div, c'est qu'il (je crois) doit englober une table pour que ca fonctionne.
il faudrait peut etre utiliser des tables imbriquees pour une meilleure presentation.
sinon, tu n'as pas besoin d'appeller une fonction qui appelle deux autres fonctions tu peux tout faire dans ta fonction changeaffichage() :  

Code :
  1. function changeaffichage()
  2. {
  3.    if (document.getElementById("bouton" ).checked=='true')
  4.        document.getElementById("layer" ).style.display="";
  5.    else
  6.       document.getElementById("layer" ).style.display="none";
  7. }


 

Reply

Marsh Posté le 07-03-2003 à 12:14:24    

ok c resolu, il fallait mettre un </table> juste avant la balise div...
 
trop merci en tout cas pour le code :-)
 
et Par défaut pour que le champs "nom entreprise " ne soit pas affiché, il faut faire quoi?

Reply

Marsh Posté le 07-03-2003 à 12:22:46    

fbthereturn a écrit :

ok c resolu, il fallait mettre un </table> juste avant la balise div...
 
trop merci en tout cas pour le code :-)
 
et Par défaut pour que le champs "nom entreprise " ne soit pas affiché, il faut faire quoi?


 
tu rajoutes ca dans ta balise :
style='display:"none"'

Reply

Marsh Posté le 07-03-2003 à 12:26:28    

trop trop trop merci walli, ça marche!!!!
 
grace à vous je peux aller manger tranquille :-)
 
merci à tous :-)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed