Mise à jour de champs

Version imprimable

09/01/2006, 13h50
Mil

Mise à jour de champs

Bonjour,

Il me semble que ce n est pas faisable facilement mais j aimerai avoir un formulaire où la liste présente dans le deuxième champs dépend de la sélection faite dans le premier champ. Du style j ai un champ Pays qui contient France, Angleterre, Espagne et un champ ville. J aimerai que si l on choisit France seule les villes françaises de ma base n apparaissent dans la liste 2.

Je crois que c est pas faisable en PHP et qu il faut passer par du javascript. Mais comme je suis pas sure je vous soumet qd même mon problème.

Merci d avance

Mil
09/01/2006, 13h54
siddh

c'est faisable en php, il suffit juste de poster ton formulaire sur le onchange de ton select et de regénérer ta page en gardant le bon pays et en remplissant la liste des villes.

Tu peux aussi le faire sans recharger la page grace a javascript effectivement.
09/01/2006, 15h20
vg33

Précision : en js, tu peux utiliser l'objet XMLHttpRequest, qui sert justement à ça. Pour un changement de select, la modification est le plus souvent instantannée, c'est même assez spectaculaire.
09/01/2006, 15h31
Mr N.

Citation:

Envoyé par siddh

c'est faisable en php, il suffit juste de poster ton formulaire sur le onchange de ton select et de regénérer ta page en gardant le bon pays et en remplissant la liste des villes.

Tu peux aussi le faire sans recharger la page grace a javascript effectivement.

juster pour rappeler que onchange == javascript
;)
09/01/2006, 15h35
Mil

pour le onChange c etait la solution que je voyais mais ça force un rechargement de la page ...
Je vais regarder ce qu est XMLHttpRequest dont parle vg33 car je ne connais pas du tout ...
Si ça sert précisémment à ça c est cool !

Merci de vos réponses, je creuse ...
09/01/2006, 16h07
siddh

XmlHttpRequest ça sera du javascript aussi,
regardes tes messages persos ;)

MErci ... J ai pris ton tuto et je l ai mis à ma sauce mais ça ne semble pas fonctionner ...
Moi j ai une table lieu et une machine. POur le moment j ai rien dans mes tables du coup j ai mis dans lieu (id_lieu, nom)
1 FRance
2 Angleterre

Et dans machine (id_machine, nom, id_lieu)
1 Paris 1
2 Lyon 1
3 Lille 1
4 LOndres 2

Voici le code (le nom de fichier vient d un autre essai) :
- Index. php

Code:

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
67
68
69
70
 
 <html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script language="javascript">
			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; 
			} 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				if(xhr){
					// 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){
							lesoptions = xhr.responseText;
							// On se sert de innerHTML pour rajouter les options a la liste
							document.getElementById('machine').innerHTML = lesoptions;
						}
					}
 
					// Ici on va voir comment faire du post
					xhr.open("POST","species.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 de l'auteur
					sel = document.getElementById('lieu');
					idlieu = sel.options[sel.selectedIndex].value;
					xhr.send("idlieu="+idlieu);
				}
				else // xhr n'existe pas
					alert("Houston on a un problème !");
 
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Lieu</label>
				<select name='lieu' id='lieu' onchange='go()'>
					<option value='-1'>choisir un lieu</option>
					<option value='1'>France</option>
					<option value='2'>Angleterre</option>
				</select>
				<label>Machines</label>
				<select name='machine' id='machine'>
					<option value='-1'>Choisir une machine</option>
				</select>
			</fieldset>
		</form>
	</body>
</html>

- species.php (là c est le fichier dont le nom vient d un autre essai ;o) )

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
<?php
        if(isset($_POST['idlieu'])){
                mysql_connect("localhost","root","pass");
                mysql_select_db("maintenance");
                $res = mysql_query("SELECT id_machine,nom FROM machine
                        WHERE id_lieu=".$_POST["idlieu"]." ORDER BY id_machine");
 
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["id_machine"]."'>".$row["nom"]."</option>";
                }
                mysql_close();
                        }
//echo "<option value='1'>ici</option>";
 
?>

J ai l impression qu il ne va pas du tout dans mon fichier species.php ... Car j avais placé la ligne qui est en commentaire hors du test sur le POST et ça ne marche pas mieux ... Dc ce n est pas simplement le fait de ne pas voir le POST['idlieu'] ...
Mystère !!

alors essayes de voir si ton php marche en faisant un page avec juste :

Code:

1
2
3
4
5
6
7
8
9
mysql_connect("localhost","root","pass");
      mysql_select_db("maintenance");
      $res = mysql_query("SELECT id_machine,nom FROM machine
         WHERE id_lieu=1 ORDER BY id_machine");
 
      while($row = mysql_fetch_assoc($res)){
         echo "<option value='".$row["id_machine"]."'>".$row["nom"]."</option>";
      }
      mysql_close();

par exemple, et tu interroge directement dans ton navigateur ;)

09/01/2006, 18h04
Mil

OUi ça marche ...
Enfin comme j ai pas la balise SELECT, il m ecrit juste le nom des villes les unes après les autres mais ça fonctionne.

J ai de toute façon pas vraiment l impression qu il arrive jusqu à cette page.
09/01/2006, 18h36
siddh

ok t'as pas d'erreur javascript ?
en bas a gauche dans ie un panneau avec un point d'exclamation, tu double click dessus et regarde les details ;)
10/01/2006, 10h26
Mil

Ben malheureusement non ...
Pas d erreur .. :cry:

et si ici :

Code:

1
2
3
4
5
if(xhr.readyState == 4 && xhr.status == 200){
                     lesoptions = xhr.responseText;
                     // On se sert de innerHTML pour rajouter les options a la liste
                     document.getElementById('machine').innerHTML = lesoptions;
                  }

tu met ça :

Code:

1
2
3
4
5
6
if(xhr.readyState == 4 && xhr.status == 200){
                     lesoptions = xhr.responseText;
                     alert(lesoptions);
 
                     document.getElementById('machine').innerHTML = lesoptions;
                  }

tu as le alert ?

10/01/2006, 12h23
Mil

Oui j ai la fenetre d alerte qui s ouvre avec toutes les lignes
<option> qui s affichent ... :cfou:
10/01/2006, 12h36
siddh

et il ne fait pas le innerHTML ? :koi:

as tu essayé dans firefox en regardant dans la console javascript si il y a des erreurs ?
10/01/2006, 12h43
Mil

Je n ai pas Firefox ...
Je l installe et je te tiens au courant ...

Merci de ton aide en tt cas ! :wink:
10/01/2006, 12h51
Mil

Bon et bien sous Firefox ça fonctionne sans pb ...
Mon souci maintenant c est que moi j ai besoin que ça marche sous IE !!! :roll: Merci Microsoft :wink:
10/01/2006, 12h56
siddh

vide ton cache dans ie et reessayes
10/01/2006, 13h18
Mil

pas mieux ....
10/01/2006, 13h24
siddh

bonsi le alert marche sous ie et qu il te met bien ton contenu,
tu vas juste faire un

Code:

alert(document.getElementById('machine').innerHTML);

histoire de vérifier que ie te trouve bien ton élément
10/01/2006, 13h30
Mil

Effectivement il me soulève une erreur ...
J ai une erreur sur la page ... Il me dit qu à cette ligne il y a un pb : "objet requis"
10/01/2006, 13h33
siddh

verifie ton id (majuscules/minuscules)

remet ton code ici s'il te plait

Bon alors ça a avancé depuis que j ai changé les ' par des " dans cette ligne :

Code:

document.getElementById("machine").innerHTML = lesoptions;

Voici mon code ... Ensuite j expliquerai ce qui arrive maintenant :

Code:

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
67
68
69
70
71
72
73
74
 
<?php
?>
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/JavaScript'>
			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; 
			} 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				if(xhr){
					// 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){
							lesoptions = xhr.responseText;
								alert(document.getElementById("machine").innerHTML);
                                                        // On se sert de innerHTML pour rajouter les options a la liste
							document.getElementById("machine").innerHTML = lesoptions;
							alert(document.getElementById("machine").innerHTML);
						}
					}
 
					// Ici on va voir comment faire du post
					xhr.open("POST","species.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 de l'auteur
					sel = document.getElementById('lieu');
					idlieu = sel.options[sel.selectedIndex].value;
					xhr.send("idLieu="+idlieu);
				}
				else // xhr n'existe pas
					alert("Houston on a un problème !");
 
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Lieu</label>
				<select name='lieu' id='lieu' onchange='go()'>
					<option value='-1'>choisir un lieu</option>
					<option value='1'>France</option>
					<option value='2'>Angleterre</option>
				</select>
				<label>Machines</label>
				<select name='machine' id='machine'>
					<option value='-1'>Choisir une machine</option>
				</select>
			</fieldset>
		</form>
	</body>
</html>
           <?php ?>

et species.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
        if(isset($_POST['idLieu'])){
                mysql_connect("localhost","root","pass");
                mysql_select_db("maintenance");
                $res = mysql_query("SELECT id_machine,nom FROM machine
                        WHERE id_lieu='".$_POST['idLieu']."' ORDER BY id_machine");
 
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row['id_machine']."'>".$row['nom']."</option>";
                }
                mysql_close();
        }
?>

Maintenant l alerte s affiche. Comme tu peux le voir j en ai mis deux une avant l affectation et une autre après.
LA premiere m affiche "<OPTION value=-1 ..." donc tout va bien
La seconde, et là c est bizarre : "Paris </OPTION><OPTION>..."
Comme tu vois il me zappe la balise <OPTION> avant Paris ... et du coup c est plutot logique que ça ne fonctionne pas ! Par contre pourquoi la zappe t il ???

10/01/2006, 13h54
siddh

et un alert de lesoptions ou de xhr.responseText t affiches bien tout, ca te mange rien ?
10/01/2006, 13h57
Mil

Oui, j ai bien tout dans lesoptions ...
10/01/2006, 14h03
siddh

met un

Code:

<div id='mondiv'></div>

dans ta page et fais le innerHTML sur lui pour voir ce que ça donne

c'est quand meme bien bizarre :evil:
10/01/2006, 14h05
Mil

J ai pas bien compris ce que tu voulais que je fasse ... Moi etre un peu blonde :wink:
J ai remarqué un autre comportement bizarre ... Mais c est peut etre lié .. Qd je tente de changer à nouveau le lieu je n arrive même pas aux alerts mais je me dis que c est peut etre parce que ça a merdé avant ...

Bon j ai fait ça :

Code:

1
2
3
4
5
6
lesoptions = xhr.responseText;
 
							// On se sert de innerHTML pour rajouter les options a la liste
							//document.getElementById("machine").innerHTML=lesoptions;
							document.getElementById("mondiv").innerHTML=lesoptions;
							alert(document.getElementById("mondiv").innerHTML);

Alors les 3 villes s affichent bien à l ecran mais mon alert apparait tt de même sans le "<OPTION ...".

10/01/2006, 14h09
Mil

Et je confirme, je ne peux choisir le lieu qu une seule fois !
10/01/2006, 14h12
siddh

alors,
en fait c'etait pour voir si c'etais lié au select ou pas. (oui je sais c'est un peu tiré par les cheveux).

Pour le re-changement, ca vient peut etre de la oui.

Et donc je résume :
sous ffx ca marche et sous ie il mange juste le premier <option> quand on fait le innerHTML alors qu'il existe avant.
10/01/2006, 14h17
Mil

oui il me vire la premiere balise <OPTION value=1> ...Mais seulement sous Internet Explorer !!!
Sous Firefox no soucy ...
10/01/2006, 15h35
siddh

bon je regarde ça, je revient ce soir ;)
10/01/2006, 15h39
Mil

OK ... Merci beaucoup ...
J essaye de voir moi aussi de mon coté ...

Bon aprem'

bon alors, c'est un bug ie qui n'accepte pas de innerHTML dans un select :twisted:

du coup, il faut mettre un div autour du select et faire le innerHTML dessus et renvoyer la balise select depuis php :

Code:

1
2
3
4
5
<div id='machine' style='disply:inline'>
<select name='machine'>
      <option value='-1'>Choisir une machine</option>
</select>
</div>

et donc dans le javascript :

Code:

1
2
3
4
if(xhr.readyState == 4 && xhr.status == 200){
        leselect = xhr.responseText;
        document.getElementById("machine").innerHTML = leselect;
}

et dans la page php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?php
   if(isset($_POST['idLieu'])){
      mysql_connect("localhost","root","pass");
      mysql_select_db("maintenance");
      $res = mysql_query("SELECT id_machine,nom FROM machine
         WHERE id_lieu='".$_POST['idLieu']."' ORDER BY id_machine");
 
      echo "<select name='machine'>";
      while($row = mysql_fetch_assoc($res)){
         echo "<option value='".$row['id_machine']."'>".$row['nom']."</option>";
      }
      echo "</select>";
      mysql_close();
   }
?>

11/01/2006, 10h54
Mil

Hello !

Bon effectivement ça fonctionne mais y a toujours un hic ...
Je ne peux faire qu une seule fois cette opération car ensuite ça ne marche plus ! Je pensais que ça venait du bug mais a priori non ...

ah oui pardon :D

j'ai oublié un truc, toujours a cause de ie :

tu transforme

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
      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;
         }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 function getXhr(){       
    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;
         }
}

et
tu transforme

Code:

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
function go(){
            if(xhr){
               // 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){
                     lesoptions = xhr.responseText;
                        alert(document.getElementById("machine").innerHTML);
                                                        // On se sert de innerHTML pour rajouter les options a la liste
                     document.getElementById("machine").innerHTML = lesoptions;
                     alert(document.getElementById("machine").innerHTML);
                  }
               }
 
               // Ici on va voir comment faire du post
               xhr.open("POST","species.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 de l'auteur
               sel = document.getElementById('lieu');
               idlieu = sel.options[sel.selectedIndex].value;
               xhr.send("idLieu="+idlieu);
            }
            else // xhr n'existe pas
               alert("Houston on a un problème !");
 
         }

Code:

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
 
function go(){
            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){
                     lesoptions = xhr.responseText;
                        alert(document.getElementById("machine").innerHTML);
                                                        // On se sert de innerHTML pour rajouter les options a la liste
                     document.getElementById("machine").innerHTML = lesoptions;
                     alert(document.getElementById("machine").innerHTML);
                  }
               }
 
               // Ici on va voir comment faire du post
               xhr.open("POST","species.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 de l'auteur
               sel = document.getElementById('lieu');
               idlieu = sel.options[sel.selectedIndex].value;
               xhr.send("idLieu="+idlieu);
 
         }

on le reconstruit a chaque fois 8O

j'ai pas encore trouvé d'aurte solution,
dire que dans firefox tout marche bien du premier coup .....

11/01/2006, 13h14
Mil

Perfect !
Merci beaucoup Siddh !!!

A moi de faire en sorte maintenant que ça marche pour plusieurs champs ...
C est cool tu m as bien aidée ...

Encore merdi !
11/01/2006, 18h11
siddh

de rien
si tu as d'autres questions, créé un nouveau sujet par contre ;)