Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1722 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1506995
cyberP@cal
Posté le 25-01-2007 à 01:55:42  profilanswer
 

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
mood
Publicité
Posté le 25-01-2007 à 01:55:42  profilanswer
 

n°1507001
olivthill
Posté le 25-01-2007 à 08:11:06  profilanswer
 

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

n°1507066
cyberP@cal
Posté le 25-01-2007 à 11:25:44  profilanswer
 

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

n°1507070
cyberP@cal
Posté le 25-01-2007 à 11:33:42  profilanswer
 

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.

n°1507085
omega2
Posté le 25-01-2007 à 12:13:04  profilanswer
 

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?

n°1507109
olivthill
Posté le 25-01-2007 à 13:38:47  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[Javascript/HTML] balise <object> et javascipt[Html,css,javascript] Gallerie Lightbox
Variable avec Javascript divun bouton.. deux actions !... sans javascript !
Un Javascript pour changer l'ordre des TD dans un TABLERécupérer la date et l'heure du système en javascript
pblm javascript simple[JAVASCRIPT] Previsualisation prix TTC
[C] Liste chaibee Double Probleme 
Plus de sujets relatifs à : [javascript] désactiver une liste déroulante en cochant 1 bouton radio

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.119 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR