[javascript] désactiver une liste déroulante en cochant 1 bouton radio

désactiver une liste déroulante en cochant 1 bouton radio [javascript] - HTML/CSS - Programmation

Marsh Posté le 25-01-2007 à 01:55:42    

Voila je suis en train de réaliser un formulaire et je voudrai que lorsque je coche un bouton radio cela désactive une liste découlante.Je vous donne un bout de mon code :
 

Code :
  1. <P>
  2.   Aller simple :<INPUT TYPE='RADIO' NAME='type' VALUE='as' checked>
  3.   Aller-retour : <INPUT TYPE='RADIO' NAME='type' VALUE='ar' > &nbsp;
  5. </div>
  7. <p>
  9. <div class="conteneur2">
  10. <div class="centre2">
  11. <FONT COLOR="#ffffff">
  12. <b>Précisez</b> </FONT>
  13. </div>
  14. <p>
  15. <div class="conteneur1">
  16. <div class="centre1">
  17. <b>Date aller :</b>
  18. <script language="javascript">creerselect();</script>
  19. <br>
  20. <b>Date retour :</b>
  21. <script language="javascript">creerselect2();</script>


 
Le souci c'est que je débute en javascript. La fonction creerselect2() me permet d'afficher 3 liste déroulante permettant de selectionner le jour/mois/annee. Donc je voudrai que ces 3 listes se désactivent quand je click sur aller simple
 
voici le code la fonction creer select (assez complexe) :

Code :
  1. function creerselect2(){
  4. // Création de la liste déroulante des numéros des jours
  5. document.write("<select name='jj2'>" );
  6. for(i=1;i<=31;i++){
  7.    document.write("<option value="+i);
  8.    if(aujour.getDate()==i){document.write(" selected" );}
  9.    document.write(">"+i+"</option>" );
  10. }
  11. document.write("</select>" );
  13. // Création de la liste déroulante des libellés des mois
  14. document.write("<select name='mm2'>" );
  15. for(i=0;i<=11;i++){
  16.    document.write("<option value="+i);
  17.    if(aujour.getMonth()==i){document.write(" selected" );}
  18.    document.write(">"+mois[i]+"</option>" );
  19. }
  20. document.write("</select>" );
  21. // Création de la liste déroulante des années  
  22. annee=aujour.getYear();if(annee<1900){annee=annee+1900;}
  23. document.write("<select name='aa2'>" );
  24. for(i=-1;i<=0;i++){
  25.    document.write("<option value="+(annee-i));
  26.    if(i==0){document.write(" selected" );}
  27.    document.write(">"+(annee-i)+"</option>" );
  28. }
  29. document.write("</select>" );


 
merci de votre aide


Message édité par cyberP@cal le 25-01-2007 à 02:01:46
Reply

Marsh Posté le 25-01-2007 à 01:55:42   

Reply

Marsh Posté le 25-01-2007 à 08:11:06    

Il suffit de changer la proriété visibility.

<html>
<head>
 
<script language="javascript">
function creerselect2()
{
  aujour=new Date();
  var mois=new Array(12);
  mois[0]="janvier"; mois[1]="février"; mois[2]="mars";
  mois[3]="avril"; mois[4]="mai"; mois[6]="juin";
  mois[6]="juillet"; mois[7]="aout"; mois[8]="septembre";
  mois[9]="octobre"; mois[10]="novembre"; mois[11]="décembre";
 
  // Création de la liste déroulante des numéros des jours
  document.write("<select name='jj2'>" );
  for(i=1;i<=31;i++) {
     document.write("<option value="+i);
     if (aujour.getDate()==i) {document.write(" selected" );}
     document.write(">"+i+"</option>" );
  }
  document.write("</select>" );
   
  // Création de la liste déroulante des libellés des mois
  document.write("<select name='mm2'>" );
  for(i=0;i<=11;i++) {
     document.write("<option value="+i);
     if (aujour.getMonth()==i) {document.write(" selected" );}
     document.write(">"+mois[i]+"</option>" );
  }
  document.write("</select>" );
 
  // Création de la liste déroulante des années
  annee=aujour.getYear();
  if(annee<1900){annee=annee+1900;}
  document.write("<select name='aa2'>" );
  for(i=-1;i<=0;i++){
     document.write("<option value="+(annee-i));
     if(i==0){document.write(" selected" );}
     document.write(">"+(annee-i)+"</option>" );
  }
  document.write("</select>" );
}
 
function show_hide_date2()
{
   if (document.form1.type[0].checked==true) {
     document.getElementById('jj2').style.visibility='hidden';
     document.getElementById('mm2').style.visibility='hidden';
     document.getElementById('aa2').style.visibility='hidden';
   }
   else {
     document.getElementById('jj2').style.visibility='visible';
     document.getElementById('mm2').style.visibility='visible';
     document.getElementById('aa2').style.visibility='visible';
   }
}
 
</script>
</head>
<body>
 
<form name=form1>
Aller simple :<INPUT TYPE='RADIO' NAME='type' VALUE='as' onClick="show_hide_date2();">
<br>
Aller-retour : <INPUT TYPE='RADIO' NAME='type' VALUE='ar' checked onClick="show_hide_date2();">
 
<script language="javascript">creerselect2();</script>
</form>
 
</body>
</html>

Voilà le travail  :)

Reply

Marsh Posté le 25-01-2007 à 11:25:44    

merci mais ca ne fonctionne pas avec firefox, et avec ie sa marche uniquement avec ton code uniquement, des je l'integre dans ma page sa marche plus ...

Reply

Marsh Posté le 25-01-2007 à 11:33:42    

je redonne ma page entiere pour que vous comprenais mieux:  
 

Code :
  1. <?php
  2. require("Util.php" );
  3. //  require ("JournalVisiteurs.php" );
  5. Entete ("Easy Way", "Easy Way" );
  7. // Connexion à la base
  9. $connexion = mysql_pconnect (SERVEUR, NOM, PASSE);
  11. if (!$connexion)
  12. {
  13.   echo "Désolé, connexion à " . SERVEUR . " impossible\n";
  14.   exit;
  15. }
  17. if (!mysql_select_db (BASE, $connexion))
  18. {
  19.   echo "Désolé, accès à la base " . BASE . " impossible\n";
  20.   exit;
  21. }
  23. date_default_timezone_set("Europe/Paris" ) ;
  26. ?>
  30. <HTML>
  31. <HEAD>
  32. <TITLE>Réserver un vol</TITLE>
  33. <LINK REL=stylesheet HREF="vol.css" TYPE="text/css">
  36. <script language="javascript">
  37. <!--
  39. aujour=new Date(); // Pour générer les années
  41. // table des libellés des mois
  42. mois=new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août",
  43. "Septembre","Octobre","Novembre","Décembre" );
  45. // Création des select pour les vols de départ
  46. function creerselect(){
  48. // Création de la liste déroulante des numéros des jours
  49. document.write("<select name='jj'>" );
  50. for(i=1;i<=31;i++){
  51.    document.write("<option value="+i);
  52.    if(aujour.getDate()==i){document.write(" selected" );}
  53.    document.write(">"+i+"</option>" );
  54. }
  55. document.write("</select>" );
  57. // Création de la liste déroulante des libellés des mois
  58. document.write("<select name='mm'>" );
  59. for(i=0;i<=11;i++){
  60.    document.write("<option value="+i);
  61.    if(aujour.getMonth()==i){document.write(" selected" );}
  62.    document.write(">"+mois[i]+"</option>" );
  63. }
  64. document.write("</select>" );
  65. // Création de la liste déroulante des années  
  66. annee=aujour.getYear();if(annee<1900){annee=annee+1900;}
  67. document.write("<select name='aa'>" );
  68. for(i=-1;i<=0;i++){
  69.    document.write("<option value="+(annee-i));
  70.    if(i==0){document.write(" selected" );}
  71.    document.write(">"+(annee-i)+"</option>" );
  72. }
  73. document.write("</select>" );
  75. }
  77. // Création des select pour les vols de d'arrivé
  80. function creerselect2(){
  83. // Création de la liste déroulante des numéros des jours
  84. document.write("<select name='jj2'>" );
  85. for(i=1;i<=31;i++){
  86.    document.write("<option value="+i);
  87.    if(aujour.getDate()==i){document.write(" selected" );}
  88.    document.write(">"+i+"</option>" );
  89. }
  90. document.write("</select>" );
  92. // Création de la liste déroulante des libellés des mois
  93. document.write("<select name='mm2'>" );
  94. for(i=0;i<=11;i++){
  95.    document.write("<option value="+i);
  96.    if(aujour.getMonth()==i){document.write(" selected" );}
  97.    document.write(">"+mois[i]+"</option>" );
  98. }
  99. document.write("</select>" );
  100. // Création de la liste déroulante des années  
  101. annee=aujour.getYear();if(annee<1900){annee=annee+1900;}
  102. document.write("<select name='aa2'>" );
  103. for(i=-1;i<=0;i++){
  104.    document.write("<option value="+(annee-i));
  105.    if(i==0){document.write(" selected" );}
  106.    document.write(">"+(annee-i)+"</option>" );
  107. }
  108. document.write("</select>" );
  110. }
  112. // Vérification des select
  113. function verif(){
  115. // On crée une date avec les jj/mm/aa saisis
  116. testDate=new Date(document.frm.aa.value,document.frm.mm.value,document.frm.jj.value);
  117. testDate2=new Date(document.frm.aa2.value,document.frm.mm2.value,document.frm.jj2.value);
  119. mess="";
  121. // Est-ce le numéro du jour correspond à  celui de la date créée ?
  122. if(testDate.getDate()!=document.frm.jj.value){mess="Veillez verifier la date de départ";}
  123. if(testDate2.getDate()!=document.frm.jj2.value){mess="Veillez verifier la date d'arrivée";}
  125. // Est-ce le numéro du mois correspond à celui de la date créée ?
  126. if(testDate.getMonth()!=document.frm.mm.value){mess="Veillez verifier la date de départ";}
  127. if(testDate2.getMonth()!=document.frm.mm2.value){mess="Veillez verifier la date d'arrivée";}
  129. // Y a-t-il eu des erreurs ?
  130. if(mess!="" )
  131. {
  132. alert(mess);
  133. document.frm.jj.focus();
  134. document.frm.jj2.focus();
  135. return false;
  136. }
  137.  
  138. else {
  140. if(document.frm.depart.value == document.frm.arrive.value) 
  141. {
  142.    alert("Veillez choisir une ville de départ differente de celle d'arrivée" );
  143.    document.frm.depart.focus();
  144.    return false;
  145. }
  148. } 
  149. }
  150. //-->
  152. </script>
  154. </HEAD>
  156. <BODY>
  158. <H1><center>Bienvenue sur le site Easy Way</center></H1>
  159. <br>
  160. <br>
  162. <form name="frm" action="rechercheVol.php" method="post" onSubmit="return verif()">
  163. <div class="conteneur2">
  164. <div class="centre2">
  165. <FONT COLOR="#ffffff">
  166. <b>Votre voyage</b> </FONT>
  167. </div>
  168. <p>
  169. <div class="conteneur1">
  170. <div class="centre1">
  172. <?php
  173. $resultat = mysql_query ("SELECT * FROM depart order by nomDepart", $connexion);
  175. echo "<b>Partir de :</b>
  176. <SELECT NAME='depart' SIZE=1>";
  179. if ($resultat)
  180. {
  181.   while ($dep = mysql_fetch_object ($resultat))
  182.     {
  184.   //$i=$i+1;
  185.   echo "<OPTION VALUE=$dep->numDepart>$dep->nomDepart";
  186.     }
  187. }
  188. else
  189. { 
  190.   echo "<B>Erreur dans l'exécution de la requête.</B><BR>";
  191.   echo "<B>Message de MySQL :</B> " .  mysql_error($connexion);
  192. } 
  193. echo "</SELECT><p>";
  195. $resultat2 = mysql_query ("SELECT * FROM arrive order by nomArrive", $connexion);
  197. echo "<b>Arriver à :</b>
  198. <SELECT NAME='arrive' SIZE=1>";
  201. if ($resultat2)
  202. {
  203.   while ($arr = mysql_fetch_object ($resultat2))
  204.     {   
  205.   echo "<OPTION VALUE=$arr->numArrive>$arr->nomArrive";
  206.     }
  207. }
  208. else
  209. { 
  210.   echo "<B>Erreur dans l'exécution de la requête.</B><BR>";
  211.   echo "<B>Message de MySQL :</B> " .  mysql_error($connexion);
  212. } 
  213. echo "</SELECT>";
  216. ?>
  217.  
  218.  
  219. <P>
  220.   Aller simple :<INPUT TYPE='RADIO' NAME='type' VALUE='as' checked>
  221.   Aller-retour : <INPUT TYPE='RADIO' NAME='type' VALUE='ar' > &nbsp;
  223. </div>
  225. <p>
  227. <div class="conteneur2">
  228. <div class="centre2">
  229. <FONT COLOR="#ffffff">
  230. <b>Précisez</b> </FONT>
  231. </div>
  232. <p>
  233. <div class="conteneur1">
  234. <div class="centre1">
  235. <b>Date aller :</b>
  236. <script language="javascript">creerselect();</script>
  237. <br>
  238. <b>Date retour :</b>
  239. <script language="javascript">creerselect2();</script>
  241.  
  242. <P>
  243.   Nombre de personnes <FONT COLOR="#ff0000">(15 ans et +) </font>:
  244.   <SELECT NAME='nbPers' SIZE=1>
  246.   <OPTION VALUE=1>1
  247.   <OPTION VALUE=2>2
  248.   <OPTION VALUE=3>3
  249.   <OPTION VALUE=4>4
  250.   <OPTION VALUE=5>5
  251.   <OPTION VALUE=6>6
  252.   </SELECT>
  253.  
  254.   <p>
  255.   Nombre d'enfants <FONT COLOR="#ff0000">(- de 15 ans) </font>:
  256.   <SELECT NAME='nbEnf' SIZE=1>
  258.   <OPTION VALUE=1>0 
  259.   <OPTION VALUE=2>1
  260.   <OPTION VALUE=3>2
  261.   <OPTION VALUE=4>3
  262.   <OPTION VALUE=5>4
  263.   <OPTION VALUE=6>5
  264.   </SELECT>
  265. </div>
  267. <p>
  269. <div class="conteneur2">
  270. <div class="centre2">
  271. <FONT COLOR="#ffffff">
  272. <b>Votre choix</b> </FONT>
  273. </div>
  274. <p>
  275. </form>
  277.   <INPUT TYPE='SUBMIT' VALUE='Rechercher un vol'>
  278.   <INPUT TYPE='RESET' VALUE='Annuler'>
  279. <p>
  280.  
  281. </BODY></HTML>
  284. <?php
  285.   PiedDePage();
  286. ?>


 
Je voudrai que sa fasse un peu comme sur le site d'air france : http://www.airfrance.fr/cgi-bin/AF [...] dgfndfkj.0
 
Quand on click sur aller simple le select des dates se désactive.

Reply

Marsh Posté le 25-01-2007 à 12:13:04    

Si t'as une page qui fonctionne de cette maniére là, alors pourquoi tu ne regarde pas le code javascript de la dite page afin de l'adapter à la tienne?

Reply

Marsh Posté le 25-01-2007 à 13:38:47    

Pour que ça marche sous Firefox, il faudrait utiliser "id=..." au lieu ou en plus de "name=..." pour tous les éléments qui sont impliqués dans les getElementById().

Reply

Sujets relatifs:

Leave a Replay

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