[Formulaire] Afficher 2 autres champs si on sélectionne une option

Version imprimable

07/05/2008, 16h36
plex

[Formulaire] Afficher 2 autres champs si on sélectionne une option

Bonjour,
Je suis en train de réaliser un formulaire pour une application en php / html
Et j'aurais voulu ajouter une petite fonction à celui ci.

Par exemple, lorsqu'on sélectionne une option dans le formulaire
motif de commande = commandeclient

J'aimerais que soit affichées les commandes en cours (toutes ou alors celles pour le fournisseur X)
ou encore les différents clients de la base de données(Mysql).

J'aimerais savoir comment il est possible de faire ca.
D'avance, :yaisse2:
Merci

plEx
07/05/2008, 16h52
Er3van

Si j'ai bien compris tu veux un formulaire dynamique, si c'est le cas : JavaScript ou Ajax oblige.
07/05/2008, 17h26
SpaceFrog

oui il faudra en fait aller taper le serveur pour retirer des infos selon la selction et afficher les infos issues de la selection ..

je te conseillerais le tuto de siddh sur ajax ...

http://siddh.developpez.com/articles/ajax/
13/05/2008, 16h50
plex

Bonjour,
Merci pour ce super tuto :) SpaceFrog.
J'ai toutes fois une petite question sur le fonctionnement de ce script.

En effet, j'aurais aimé ajouter des options de tri.
Par exemple, ici on voit des livres, triés par auteur et par titre.

J'aurais voulu rajouter l'année de parution du livre.

Comment dois je faire ?
En effet, si je rajoute des lignes dans ajaxLivre.php
Les options seront affichées pour le livre ...

Faut il peut etre créer une autre fonction qui fera appel à un autre fichier ajaxLivre.php ? mais ca va faire bcp de fichier ajax ...

Serait il possible d'avoir un exemple ?
Merci d'avance,

PlEx
13/05/2008, 16h55
SpaceFrog

Je te conseille de faire le tri coté php

dans la requete ajax envoyée, il suffit de passer en paramètre une variable de tri
pour traiter la requete mysql avec un SORT BY ...
13/05/2008, 17h00
plex

Merci pour ta réponse Spacefrog mais je suis assez ... novice en php.
Pourrais tu me donner un exemple s'il te plait ?
13/05/2008, 17h02
SpaceFrog

tu as un petit bout de code ?

Oui biensur :)
Alors ca c'est la page dont la source est la page html de l'exemple :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
 
			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
			*/
			function go(){
				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('reference').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","require/actions/ajax_fournisseurs.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'fournisseur
				sel = document.getElementById('fournisseur');
				idfournisseur = sel.options[sel.selectedIndex].value;
				xhr.send("idfournisseur="+idfournisseur);
			}
		</script>
	</head>
	<body>
	multio2
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Fournisseurs</label>
				<select name='fournisseur' id='fournisseur' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
 
						mysql_select_db("gestion");
						$res = mysql_query("SELECT * FROM fournisseur ORDER BY nom");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
						}
					?>
				</select>
				<br>
 
				<label>Annee</label>
				<div id='annee' style='display:inline'>
				<select name='annee'>
					<option value='-1'>Choisir une annee</option>
				</select>
				</div>
 
 
 
				<label>Référence</label>
				<div id='reference' style='display:inline'>
				<select name='reference'>
					<option value='-1'>Choisir une Annee</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

Et voici la fonction php proposée et modifiée

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?php
	echo "<select name='ref'>";
	if(isset($_POST["idfournisseur"])){
		mysql_connect("localhost","root","");
		mysql_select_db("gestion");
		$res = mysql_query("SELECT id,ref FROM produits 
			WHERE idfournisseur=".$_POST["idfournisseur"]." ");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["nom"]."'>".$row["ref"]."</option>";
		}
 
 
	}
	echo "</select>";
?>

Au sujet des tables :

Fournisseur :
---id
---nom

Produit :
---id
---ref
---annee
---fournisseur

Annee :
--2007
--2008
--2008bis

Merci encore pour ton aide :) :bug:

Citation:

Envoyé par plex

Code:

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

Ca devrait suffir pour trier tes résultats par id par exemple

14/05/2008, 09h49
plex

Citation:

Envoyé par tusssss

Ca devrait suffir pour trier tes résultats par id par exemple

Oui non mais ca ok je sais faire lol.
Moi je veux n'afficher que les produits de l'année 2008 par exemple.
Et pas juste faire un Order By.

En fait dans le code HTML, le formulaire propose 3 cases
La sélection du fournisseur
--> qui déclanche l'affichage de tout les produits existant chez ce fournisseur

Et en option, j'aimerais pouvoir afficher les années des collections des produits,
Et par exemple, je sélectionne 2008, et on ne verra plus que les produits du fournisseur X et de l'année 2008 :)

Je sais, je chipote :p:yaisse2:
14/05/2008, 09h53
SpaceFrog

ben

Code:

WHERE année='".$_POST['selAnnee']."';"
14/05/2008, 09h56
tusssss
Code:

1 2 SELECT id,ref FROM produits WHERE idfournisseur=".$_POST["idfournisseur"]." " AND annee=".$_POST["anneeselectionnee"]." "
J'ai du mal à comprendre ce que tu veux, la je te donne juste la partie SQL, parce que j'imagine que si tu as réussi à faire fonctionner la requete pour l'idfournisseur tu dois pouvoir faire fonctionner la requete pour l'année.

Désolé pour ma lenteur à la détente.

Doit y avoir des erreurs aux niveaux des dblquotes dans ce que j'ai écrit, puisque j'ai betement fait un copier/coller, mais bon l'idée est la.
14/05/2008, 09h57
plex

Citation:

Envoyé par SpaceFrog

ben

Code:

WHERE année='".$_POST['selAnnee']."';"

Oui, voila, avec un WHERE en plus.
Mais comment faire la fonction si l'année n'est pas passée ?

Il faut faire

Si je fournisseur est défini alors
si l'année est définie alors
[requete avec le where pour l'année et le fournisseur]
sinon
[requete avec le fournisseur seul]
fin

De plus dans mon script, ca n'affiche pas les années puisque c'est dans l'autre page php :s
14/05/2008, 09h59
SpaceFrog

OR ?
mais ça relève plus du forum php/mysql que de javascript ...

sinon un outer joint ON annee= ...
14/05/2008, 10h02
tusssss
Citation:

Envoyé par plex

Oui, voila, avec un WHERE en plus.
Mais comment faire la fonction si l'année n'est pas passée ?

Il faut faire

Si je fournisseur est défini alors
si l'année est définie alors
[requete avec le where pour l'année et le fournisseur]
sinon
[requete avec le fournisseur seul]
fin

?
Code:

1 2 3 4 5 6 7 8 if isset ($_POST('année')) { $res=requete avec l'année } else { $res=requete sans l'année }
Il est meme peut etre possible que si ton $POST(annee) n'existe pas, alors il envoie une requete sans valeur recherchée pour l'année et que donc tu n'ai pas a distinguer les cas, mais je suis loin d'en etre sur.

Bon courage

J'ai parlé avec l'auteur du tuto ajax en MP, super cool :)
Il me conseil de rajouter quelques éléments à la fonction java.

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
 
			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
			*/
			function go(){
				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('reference').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","require/actions/ajax_fournisseurs.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'fournisseur
				sel = document.getElementById('fournisseur');
				idfournisseur = sel.options[sel.selectedIndex].value;
				/*
				xhr.send("idfournisseur="+idfournisseur);
				///////////////
				an= document.getElementById('annee');
				idannee = an.options[an.selectedIndex].value;
				xhr.send("idannee="+idannee);
			*/	
 
sel = document.getElementById('fournisseur');
idfournisseur = sel.options[sel.selectedIndex].value;				
an= document.getElementById('annee');
idannee = an.options[an.selectedIndex].value;
var ann = "";
if(idannee != "-1")
ann =  "&idannee="+idannee;                          
xhr.send("idfournisseur="+idfournisseur+ann);
 
			}
		</script>
	</head>
	<body>
	multio2
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Fournisseurs</label>
				<select name='fournisseur' id='fournisseur' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
 
						mysql_select_db("gestion");
						$res = mysql_query("SELECT * FROM fournisseur ORDER BY nom");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
						}
					?>
				</select>
				<br>
 
				<label>Annee</label>
				<div id='idannee' style='display:inline'>
				<select name='idannee' id="annee" onclick="go()">
					<option value='-1'>Choisir une annee</option>
				</select>
				</div>
 
 
 
				<label>Référence</label>
				<div id='reference' style='display:inline'>
				<select name='reference' id="reference" onclick="go()">
					<option value='-1'>Choisir une ref</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

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
 
<?php
	echo "<select name='ref'>";
	if(isset($_POST["idfournisseur"])){
 
		mysql_connect("localhost","root","");
		mysql_select_db("gestion");
 
				$annee = "";
				if(isset($_POST["idannee"])){
                $annee = " AND annee=".$_POST["idannee"];
                }
 
		$res = mysql_query("SELECT id,ref FROM produits 
			WHERE idfournisseur=".$_POST["idfournisseur"].$annee."  ");
		while($row = mysql_fetch_assoc($res))
{
			echo "<option value='".$row["ref"]."'>".$row["ref"]."</option>";
		}
 
 
	}
	echo "</select>";
?>

Mais il semble y avoir une erreur quelque part mais je ne voit pas ou.
Et dans apache, ya rien visiblement :s