11548 sujets

JavaScript, DOM et API Web HTML5

Formulaire : select liés

Bonjour,

je n'ai pas réussi à trouver la solution à mon pb sur le forum, je me permet donc de poser ma question spécifiquement, merci pour votre patience et vos explications :

Dans un formulaire, j'ai deux select, qui servent à choisir 2 mois (...qui serviront à construire un intervalle sur une requete SQL après...) ; pour positionner les 2 mois en fonction de la date courante, au chargement du formulaire, pas de pb, par contre, je souhaite que le deuxieme select indique comme option selectionnée le mois selectionné dans le premier, et cela dynamiquement , après selection par l'utilisateur, évidement !

Par ailleurs, je ne sais pas bien utiliser les tableaux (array...?), et je suis sur que les fonctions ci dessous que j'emploie pour remplir mes select ne sont pas des plus "élégantes...." :

Le code HTML :


<form method="post" name="ca" action="<?php echo $ca; ?>">
		
			<br>
				 
			<table width="450" align="center" cellspacing="3" class="tableau">
  				<tr>
					<table width="450">
    					<tr>
    						<td ><label>
    							<input type="radio" name="choix_ca" value="1mois" onClick="Change2()" checked="checked" >
    						    CA sur un mois
								</label>							</td>
								   
							<td>							</td>
							<td id="1_mois"><? 
							$m=date("m");
							$month=Month_NumToLetter($m); 
							$i=0;
							?>
							<select name="mois1">
							<option value="<?php echo $month;?>" SELECTED><?php echo $month;?></option>
							
							<? do {
									$i=$i+1;
									$mois[$i]=Month_NumToLetter($i)
									?> <option value="<?php echo $mois[$i];?>"><?php echo $mois[$i];?></option>
							
							<?		}
							while($i<=11) ;
							?>
							</select>							</td>
							<td>
&nbsp;&nbsp;&nbsp;							</td>
  						</tr>
						
    					<tr>
    						<td><label>
    						    <input type="radio" name="choix_ca" value="plusieurs_mois"   onClick="Change()">
    						    CA sur plusieus mois
								</label>							</td>
							<td id="plusieurs_mois">
								de :							</td>
							<td id="plusieurs_mois2">
							<? 
							$m=date("m");
							$month=Month_NumToLetter($m); 
							$i=0;
							?>
							<select name="mois2" >
							<option value="<?php echo $month;?>" SELECTED><?php echo $month;?></option>
							
							<? do {
									$i=$i+1;
									$mois[$i]=Month_NumToLetter($i)
									?> <option value="<?php echo $mois[$i];?>"><?php echo $mois[$i];?></option>
							
							<?		}
							while($i<=11) ;
							
							?>
							</select>							</td>
							<td id="plusieurs_mois3">
							<? $mois_suivant=$month;
							
							?>
								à :							</td>
  							<td id="plusieurs_mois4">
							<select name="mois3" onFocus="MoisSuivant()" >
							
							<!--<option value="<?php echo $mois_suivant;?>" SELECTED><?php echo $mois_suivant;?>  </option>-->
							<? 		$m=Month_LetterToNum($mois_suivant);
									do {
									$m=$m+1;
									$mois[$m]=Month_NumToLetter($m)
									?> <option value="<?php echo $mois[$m];?>"><?php echo $mois[$m];?></option>
							
							<?		}
							while($m<=11) ;
							?>
							</select>							</td>
						</tr>
  					</table>
				</tr>
			<br><br><br>
			
				<tr>
   					<td width="150"><input type="submit" name="Submit" value=" Valider votre choix "></td>
				</tr>
		  </table>
		  </form>


l'appel aux fonctions sur les input permet de masquer / afficher les select en fonction du bouton radio selectionné (elles polluent un peu le code pour la question posée, mais je les ai laissé pour avoir votr avis...), et en voici le détail...

<script language="JavaScript" type="text/javascript">

function Change() {

document.ca.mois2.disabled=false;
document.ca.mois3.disabled=false;
document.ca.mois1.disabled=true;
document.getElementById("1_mois").style.visibility="hidden";
document.getElementById("plusieurs_mois").style.visibility="visible";
document.getElementById("plusieurs_mois2").style.visibility="visible";
document.getElementById("plusieurs_mois3").style.visibility="visible";
document.getElementById("plusieurs_mois4").style.visibility="visible";

}

function Change2() {

document.ca.mois2.disabled=true;
document.ca.mois3.disabled=true;
document.ca.mois1.disabled=false;
document.getElementById("1_mois").style.visibility="visible";
document.getElementById("plusieurs_mois").style.visibility="hidden";
document.getElementById("plusieurs_mois2").style.visibility="hidden";
document.getElementById("plusieurs_mois3").style.visibility="hidden";
document.getElementById("plusieurs_mois4").style.visibility="hidden";
}


function loadFrm() {
document.ca.mois2.disabled=true;
document.ca.mois3.disabled=true;
document.ca.mois1.disabled=false;
document.getElementById("1_mois").style.visibility="visible";
document.getElementById("plusieurs_mois").style.visibility="hidden";
document.getElementById("plusieurs_mois2").style.visibility="hidden";
document.getElementById("plusieurs_mois3").style.visibility="hidden";
document.getElementById("plusieurs_mois4").style.visibility="hidden";
}

function MoisSuivant() {
alert(document.ca.mois2.value);
document.ca.mois3.selected=document.ca.mois2.value;
alert(document.ca.mois3.selected);
$mois_suivant=document.ca.mois3.selected;
return $mois_suivant;

}

</script>


et les fonctions pour remplir les select ...


function Month_LetterToNum($month) {
switch($month) {
	case "Janvier" :
		$month="01";
		break;
	case "Fevrier" :
		$month="02";
		break;
	case "Mars" :
		$month="03";
		break;
	case "Avril" :
		$month="04";
		break;
	case "Mai" :
		$month="05";
		break;
	case "Juin" :
		$month="06";
		break;
	case "Juillet" :
		$month="07";
		break;
	case "Aout" :
		$month="08";
		break;
	case "Septembre" :
		$month="09";
		break;
	case "Octobre" :
		$month="10";
		break;
	case "Novembre" :
		$month="11";
		break;
	case "Decembre" :
		$month="12";
		break;
	}
return $month;
}

function Month_NumToLetter($month) {

switch($month) {
	case "01" :
	case "1"  :
		$month="Janvier";
		break;
	case "02" :
	case "2"  :
		$month="Fevrier";
		break;
	case "03" :
	case "3"  :
		$month="Mars";
		break;
	case "04" :
	case "4"  :
		$month="Avril";
		break;
	case "05" :
	case "5"  :
		$month="Mai";
		break;
	case "06" :
	case "6"  :
		$month="Juin";
		break;
	case "07" :
	case "7"  :
		$month="Juillet";
		break;
	case "08" :
	case "8"  :
		$month="Aout";
		break;
	case "09" :
	case "9"  :
		$month="Septembre";
		break;
	case "10" :
		$month="Octobre";
		break;
	case "11" :
		$month="Novembre";
		break;
	case "12" :
		$month="Decembre";
		break;
	default :
		$month="Erreur de saisie";

	}
return $month;
}


Merci bcp pour votre aide,
cdt,
JM
Modifié par JMB (30 May 2006 - 11:01)
Je refuse de lire un code tableaunique mais si les deux select ont les mêmes options, tu peux faire onchange="this.form.elements['nom_deuxieme_select'].selectedIndex=this.selectedIndex;"
Sujet clos
Aller à