Discussion :

[maristar]

bonjour à tous, svp veuillez m'aider à résoudre mon problème. j'ai des listes déroulantes liées avec la fonction onchange(), jusque la je n'ai aucun souci tous ce passe nikel, le problème c'est quand j'ai mis ces listes dans une boucle car le user à 5 choix à faire(ma boucle a 5 itération) la 1ere itération ne me pose aucun problème, tandis que la seconde si, quand je change dans la 2eme liste, la 1ere liste se modifie et ne se passe aucun changement sur la seconde et idem pour les autre itération.
voici le code php de mes select (les 5 itération)

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php $i=1;	
	while($i <= 5) { ?>
		<select name="secteur" id="secteur" onchange="o()" tabindex="10" >											
			<option value='0'>choisissez le secteur</option>
                            <?php $rep=$bdd->query('SET NAMES `utf8`');	 
				      $rep= $bdd->prepare('SELECT * FROM secteur');
	                              $rep->execute(array());
						                 while ($donnees=$rep->fetch())
                                         { ?>
	                                              <option value="<?php echo $donnees['id_secteur']; ?>"><?php echo $donnees['sect']; ?></option>
							               <?php
	                                       } 
					                        ?>
                       </select>
		       <select name="inspection" id="inspection"  style='display:inline' >
				<option value='0'>choisissez l'inspection</option>
		       </select>
 
		<?php $i++;} ?>

et voici le code js fonction o()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function o(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('inspection').innerHTML = leselect;
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_inspection.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id du corp
				sel = document.getElementById('secteur');
				idsecteur = sel.options[sel.selectedIndex].value;
				xhr.send("id_secteur="+idsecteur);
			}

et voici la page ajax_inspection.php:

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <select name='inspection' id ='inspection'>
   <option value=""></option>
<?php if(isset($_POST["id_secteur"])){
		include("../connx_bdd.php");
	        $rep=$bdd->query('SET NAMES `utf8`');	 
	        $rep= $bdd->prepare('SELECT * FROM inspection WHERE secteur="'.$_POST["id_secteur"].'" ');
	        $rep->execute(array());
		while ($donnees=$rep->fetch())
                                         { ?>
	                                              <option value="<?php echo $donnees['id_inspec']; ?>"><?php echo $donnees['inspec']; ?></option>
 
	                                     <?php     } 
 
		}?>
	</select>

[NoSmoking]

Bonjour,
il y a déjà un soucis de taille lorsque tu crées ton document

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
while($i <= 5) { ?>
	<select name="secteur" id="secteur" onchange="o()" tabindex="10" >

cela signifie que tu as une ID qui est dupliqué et donc cela ne pourra donc pas fonctionner car dans ta fonction on trouve

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
  sel = document.getElementById('secteur');
  idsecteur = sel.options[sel.selectedIndex].value;
  xhr.send("id_secteur=" + idsecteur);

Il te faut revoir ton approche.

[maristar]

Bonjour,
grand merci pour votre réponse, avez vous svp une solution à me proposer

[NoSmoking]

Une façon de faire :
• Dans ta boucle PHP incrémente les ID à l'aide de la variable $i par exemple.
• Dans l'appel de la fonction mentionnée sur le onchange de ton <select> passe en paramètre l'incrément, $i, de la sorte tu pourras l'utiliser dans ta fonction o. Au passage prend l'habitude de nommer tes fonctions avec de « vrai nom ».

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function onChangeSelect(indice){
  // ton code en utilsant la valeur de indice
}

[maristar]

Bonjour,
encore un grand merci pour votre réponse assez claire, mais svp je serais très reconnaissante si vous m'illustrer votre solution dans un petit exemple.
merci encore
bonne journée

[Invité]

Bonjour,

1- Déjà, on peut (avantageusement) remplacer :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php $i=1;	
	while($i <= 5) { ?>
...
<?php $i++;} ?>

par :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<?php for($i=1; $i<=5; $i++;) { ?>
...
<?php } ?>

2- Ensuite, il faut IDENTIFIER chaque select, name, id de chaque boucle, grâce à $i :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<?php for($i=1; $i<=5; $i++;) { ?>
		<select name="secteur[<?php echo $i; ?>]" id="secteur-<?php echo $i; ?>" onchange="onChangeSelect(<?php echo $i; ?>)" tabindex="10" >
...
		<select name="inspection[<?php echo $i; ?>]" id="inspection-<?php echo $i; ?>"  style="display:inline;" >
...
<?php } ?>

Et dans la fonction JavaScript :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function onChangeSelect( indice )
{
...
	document.getElementById('inspection-'+indice).innerHTML = leselect; // on cible le bon select "inspection"
...
	sel = document.getElementById('secteur-'+indice); // on cible le bon select "secteur"
	idsecteur = sel.options[sel.selectedIndex].value;
	xhr.send("id_secteur="+idsecteur);
...
}

3- Lors du traitement PHP du formulaire (après submit) :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?php foreach($_POST['secteur'] as $i => $val) { 
	$secteur_id[$i] = $_POST['secteur'][$i]; // ou $val
	$inspection_id[$i] = $_POST['inspection'][$i];
} 
?>

[maristar]

Bonjour,
Merci pour votre exemple qui était assez clair, mais votre méthode n'a pas marché pour moi, le onchange ne fonctionne plus même pour la première itération de la boucle

[Invité]

Bonjour,

Si tu ne montres pas ton code, on ne peut rien en dire...

[NoSmoking]

Je rajouterais, le code HTML généré, CTRL +U, souvent très instructif sur les erreurs commises.

[maristar]

Bonjour,
voici mon code j'ai suivi votre exemple mais le onchange ne marche plus même pour la première itération

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php $i=1;	
	while($i <= 5) { ?>
		<select name="secteur" id="secteur-<?php echo $i;?>" onchange="o(<?php echo $i;?>)" tabindex="10" >											
			<option value='0'>choisissez le secteur</option>
                            <?php $rep=$bdd->query('SET NAMES `utf8`');	 
				      $rep= $bdd->prepare('SELECT * FROM secteur');
	                              $rep->execute(array());
						                 while ($donnees=$rep->fetch())
                                         { ?>
	                                              <option value="<?php echo $donnees['id_secteur']; ?>"><?php echo $donnees['sect']; ?></option>
							               <?php
	                                       } 
					                        ?>
                       </select>
		       <select name="inspection" id="inspection-<?php echo $i;?>"  style='display:inline' >
				<option value='0'>choisissez l'inspection</option>
		       </select>
 
		<?php $i++;} ?>

et voici le code js (fonction o())

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function o(indice){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('inspection-'+indice).innerHTML = leselect;
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_inspection.php?id="+indice,true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id du corp
				sel = document.getElementById('secteur-'+indice);
				idsecteur = sel.options[sel.selectedIndex].value;
				xhr.send("id_secteur="+idsecteur);
			}

et voici la page ajax_inspection.php:

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <select name='inspection' id ='inspection-<?php echo $_GET['id'];?>'>
   <option value=""></option>
<?php if(isset($_POST["id_secteur"])){
		include("../connx_bdd.php");
	        $rep=$bdd->query('SET NAMES `utf8`');	 
	        $rep= $bdd->prepare('SELECT * FROM inspection WHERE secteur="'.$_POST["id_secteur"].'" ');
	        $rep->execute(array());
		while ($donnees=$rep->fetch())
                                         { ?>
	                                              <option value="<?php echo $donnees['id_inspec']; ?>"><?php echo $donnees['inspec']; ?></option>
 
	                                     <?php     } 
 
		}?>
	</select>

[Invité]

1-

..., le code HTML généré, CTRL +U, ...

2- Tu n'as pas appliqué toutes mes modifications.

3- dans ajax_inspection.php, il faut enlever la balise <select>.

[maristar]

j'ai enlevé le select mais tjr rien

[Invité]

Fais un copier-coller des codes ci-dessous.

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php 
	for($i=1; $i<=5; $i++;) 
	{ 
?>
	<select name="secteur[<?php echo $i; ?>]" id="secteur-<?php echo $i; ?>" onchange="getOptionsInspectionBySecteur(<?php echo $i; ?>)" tabindex="10" >
		<option value="0">choisissez le secteur</option>
<?php 	$rep=$bdd->query('SET NAMES `utf8`');	 
		$rep= $bdd->prepare('SELECT id_secteur, sect FROM secteur');
		$rep->execute(array());
		while ($donnees=$rep->fetch())
		{ 
?>
		<option value="<?php echo $donnees['id_secteur']; ?>"><?php echo $donnees['sect']; ?></option>
<?php
		} 
?>
	</select>
	<select name="inspection[<?php echo $i; ?>]" id="inspection-<?php echo $i; ?>"  style="display:inline;" >
		<option value="0">choisissez d'abord le secteur</option>
	</select>
<?php 
	} 
?>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function getOptionsInspectionBySecteur(indice)
{
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			var selectOptions = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('inspection-'+indice).innerHTML = selectOptions;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax_inspection.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	// secteur sélectionné
	var sel = document.getElementById('secteur-'+indice);
	var id_secteur = sel.options[sel.selectedIndex].value;
	xhr.send("id_secteur="+id_secteur);
}

ajax_inspection.php :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php 
	if( !empty($_POST["id_secteur"]) )
	{
?>
		<option value="0">choisissez l'inspection</option>
<?php 
		include("../connx_bdd.php");
		$rep=$bdd->query('SET NAMES `utf8`');	 
		$rep= $bdd->prepare("SELECT id_inspec, inspec FROM inspection WHERE secteur=:id_secteur");
		$rep->execute(array( ':id_secteur' => $_POST["id_secteur"]));
		while ($donnees=$rep->fetch())
		{ 
?>
		<option value="<?php echo $donnees['id_inspec']; ?>"><?php echo $donnees['inspec']; ?></option>
<?php
		}
<?php
	} else {
?>
		<option value="0">choisissez d'abord le secteur</option>
<?php
	}