Formulaire PHP/Ajax, erreur de remplissage de liste

**Misoss** · 22/07/2013, 13h43

Bjr,
j'ai un petit soucis avec des listes déroulantes qui doivent proposer des choix suivants la liste précédente, cependant la liste 'prise' disparaît lorsque que la liste 'salle' est remplit (cf. Screen en PJ)

Merci pour votre aide

ajax.php

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
	<head>
		<title>TEST le 20/07/2013</title>
		<script type='text/javascript' src="js/jquery-liste-salleBat.js">
 
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 800px">
				<legend>Liste li&eacut;es</legend>
				<label>Batiment</label>
				<select name='batiment' id='batiment' onchange='change()'>
					<option value='-1'>Choisir un batiment</option>
					<?php
include "inc/conf.inc.php";
						mysql_connect($sql_host,$sql_user,$sql_pass);
						mysql_select_db($sql_data);
						$res = mysql_query("SELECT * FROM batiment ORDER BY id");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["batiment"]."</option>";
						}
					?>
				</select>
				<label>Salle</label>
				<div id='salle' style='display:inline'>
				<select name='salle' onchange='change2()'>
					<option value='-1'>Choisir une salle</option>
				</select>
				<label>Prise</label>
				<div id='prise' style='display:inline'>
				<select name='prise'>
					<option value='-1'>Choisir une prise</option>
				</select>
 
				</div>
			</fieldset>
		</form>
	</body>
</html>

ajaxSalle.php

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
<?php
include "inc/conf.inc.php";
 
	echo "<select name='salle'>";
	if(isset($_REQUEST["idBatiment"])){
		mysql_connect($sql_host,$sql_user,$sql_pass);
		mysql_select_db($sql_data);
		$res = mysql_query("SELECT id,salle,nbprise FROM salle WHERE idbatiment=".$_REQUEST["idBatiment"]." ORDER BY id")or die("Erreur de chargement de la liste des batiments".mysql_error());
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["nbprise"]."'>".$row["salle"]."</option>";
		}
		mysql_close();
	}
	else
		echo "<option value='-1'>Choisir une salle</option>";
	echo "</select>";
?>

ajaxPrise.php

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?php
include "inc/conf.inc.php";
	echo '<select  name="prise" id="prise" onchange="change2()">';
 
	if(isset($_REQUEST["nbPrise"])){
?>
				<option value='A'>A</option>
				<option value='B'>B</option>
			<?php
		mysql_connect($sql_host,$sql_user,$sql_pass);
		mysql_select_db($sql_data);
 
				$sqlnbprise = mysql_query("SELECT * FROM salle  WHERE nbprise=".$_REQUEST["nbPrise"]." ORDER BY id")or die("Erreur de chargement de la liste des batiments".mysql_error());
				while($prise = mysql_fetch_array($sqlnbprise)){
				$nbprise = $prise['nbprise'];
				if ($nbprise = 3) {
					echo "<option value='C'>C</option>";
 
				}
				elseif($nbprise = 4) {
					echo "<option value='C'>C</option>";
					echo "<option value='D'>D</option>";
				}
				elseif($nbprise = 5) {
					echo "<option value='C'>C</option>";
					echo "<option value='D'>D</option>";
					echo "<option value='E'>E</option>";
				}
				elseif($nbprise = 6){
					echo "<option value='C'>C</option>";
					echo "<option value='D'>D</option>";
					echo "<option value='E'>E</option>";
					echo "<option value='F'>F</option>";
				}
			//	else{echo 'pas de prise disponible';}
 
				}
			?>
			</select>
<?php
	}
	else{
		echo "<option value='-1'>Choisir une salle</option>";
	echo "</select>";
 }
?>

jquery-liste-salleBat.js

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
function getXhr(){
    var xhr = null;
	if(window.XMLHttpRequest){ // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	}
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
        return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton Batiment pour renseigner Salle
*/
function change(){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
	//	alert(xhr.readyState);
	// 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){
			di = document.getElementById('salle');
			di.innerHTML = xhr.responseText;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxSalle.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 batiment
	idbatiment = document.getElementById('batiment').options[document.getElementById('batiment').selectedIndex].value;
	//alert(idbatiment);
	xhr.send("idBatiment="+idbatiment);
}
/**
* Méthode qui sera appelée sur le click du bouton Salle pour définir la prise
*/
function change2(){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		alert(xhr.readyState);
		// 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){
			di = document.getElementById('prise');
			di.innerHTML = xhr.responseText;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxPrise.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 batiment
	nbprise = document.getElementById('salle').options[document.getElementById('salle').selectedIndex].value;
	alert(nbprise);
	xhr.send("nbPrise="+nbprise);
}

**andry.aime** · 22/07/2013, 13h58

Bonjour,

N'utilise pas le même valeur pour l'attribut id et l'attribut name de différent élément, IE a une mauvaise tendance à confondre les deux.

Code :

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

echo "<select name='salle'>";

Aucune fonction ne sera appelée après le rafraîchissement du select.

Code :

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

echo '<select  name="prise" id="prise" onchange="change2()">';

La fonction change2 est appelée par le mauvais select généré. Attention, l'id prise est déjà utilisé par le div et prend en compte la première remarque.

A+.

**Misoss** · 22/07/2013, 14h44

Ok merci pour les conseils

... Erreur toute bête en plus ^^
Donc cela à bien résolus la disparition du 'select', cependant il semble que la "function change2()" ne soit pas correctement appelé, car le 'select prise' ne se remplit pas, est je n'ai aucune des deux alerte qui se trouve dans le JS.

**andry.aime** · 22/07/2013, 14h48

Tu peux reposter tes codes actuels?

A+.

**Misoss** · 22/07/2013, 15h37

Oops, c'est good

c'est moi qui n'ai pas poussé assé les tests.

Le seul petit Hic, c'est que sa fonction plus comme un OnClick qu'un OnChange.

Par exemple:
Pas OK

Si dans le bâtiment j'ai =1 salle > Prise reste à sa valeur par default et ne charge pas la liste.

OK

Si dans le bâtiment j'ai +1 salle > les Prises sont chargés.

ajax.php

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
	<head>
		<title>TEST le 22/07/2013</title>
		<script type='text/javascript' src="js/jquery-liste-salleBat.js">
 
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 800px">
				<legend>Liste li&eacute;es</legend>
				<label>Batiment</label>
				<select name='batimentSelect' id='batiment' onchange='change()'>
					<option value='-1'>Choisir un batiment</option>
					<?php
include "inc/conf.inc.php";
						mysql_connect($sql_host,$sql_user,$sql_pass);
						mysql_select_db($sql_data);
						$res = mysql_query("SELECT * FROM batiment ORDER BY id");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["batiment"]."</option>";
						}
					?>
				</select>
				<label>Salle</label>
				<div id='salleDiv' style='display:inline'>
				<select name='salleSelect' id='salle' onchange='change2()'>
					<option value='-1'>Choisir une salle</option>
				</select>
				<label>Prise</label>
				<div id='priseDiv' style='display:inline'>
				<select name='priseSelect' id='prise'>
					<option value='-1'>Choisir une prise</option>
				</select>
 
				</div>
			</fieldset>
		</form>
	</body>
</html>

ajaxSalle.php

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
<?php
include "inc/conf.inc.php";
 
	echo "<select name='salleSelect' id='salle' onchange='change2()'>";
	if(isset($_REQUEST["idBatiment"])){
		mysql_connect($sql_host,$sql_user,$sql_pass);
		mysql_select_db($sql_data);
		$res = mysql_query("SELECT id,salle,nbprise FROM salle WHERE idbatiment=".$_REQUEST['idBatiment']." ORDER BY id")or die("Erreur de chargement de la liste des batiments".mysql_error());
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["salle"]."</option>";
		}
		mysql_close();
	}
	else
		echo "<option value='-1'>Choisir une salle</option>";
	echo "</select>";
?>

ajaxPrise.php

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?php
include "inc/conf.inc.php";
	echo '<select  name="priseSelect" id="prise">';
 
	if(isset($_REQUEST["idSalle"])){
?>
				<option value='A'>A</option>
				<option value='B'>B</option>
			<?php
		mysql_connect($sql_host,$sql_user,$sql_pass);
		mysql_select_db($sql_data);
 
				$sqlnbprise = mysql_query("SELECT * FROM salle  WHERE id=".$_REQUEST['idSalle']." ORDER BY id")or die("Erreur de chargement de la liste des batiments".mysql_error());
				while($prise = mysql_fetch_array($sqlnbprise)){
				$nbprise = $prise['nbprise'];
				if ($nbprise = 3) {
					echo "<option value='C'>C</option>";
 
				}
				elseif($nbprise = 4) {
					echo "<option value='C'>C</option>";
					echo "<option value='D'>D</option>";
				}
				elseif($nbprise = 5) {
					echo "<option value='C'>C</option>";
					echo "<option value='D'>D</option>";
					echo "<option value='E'>E</option>";
				}
				elseif($nbprise = 6){
					echo "<option value='C'>C</option>";
					echo "<option value='D'>D</option>";
					echo "<option value='E'>E</option>";
					echo "<option value='F'>F</option>";
				}
			//	else{echo 'pas de prise disponible';}
 
				}
			?>
			</select>
<?php
	}
	else{
		echo "<option value='-1'>Choisir une salle</option>";
	echo "</select>";
 }
?>

jquery-liste-salleBat.js

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
function getXhr(){
        var xhr = null;
	if(window.XMLHttpRequest){ // Firefox et autres
		xhr = new XMLHttpRequest(); 
	}
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
        return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton Batiment pour renseigner Salle
*/
function change(){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		//	alert(xhr.readyState);
		// 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){
			di = document.getElementById('salle');
			di.innerHTML = xhr.responseText;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxSalle.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 batiment
	idbatiment = document.getElementById('batiment').options[document.getElementById('batiment').selectedIndex].value;
	//alert(idbatiment);
	xhr.send("idBatiment="+idbatiment);
}
/**
* Méthode qui sera appelée sur le click du bouton Salle pour définir la prise
*/
function change2(){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		//alert(xhr.readyState);
		// 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){
			di = document.getElementById('prise');
			di.innerHTML = xhr.responseText;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxPrise.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 batiment
	idsalle = document.getElementById('salle').options[document.getElementById('salle').selectedIndex].value;
	//alert(nbprise);
	xhr.send("idSalle="+idsalle);
}