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

**plex** · 07/05/2008, 17h36

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,

Merci

plEx

**Er3van** · 07/05/2008, 17h52

Si j'ai bien compris tu veux un formulaire dynamique, si c'est le cas : JavaScript ou Ajax oblige.

**SpaceFrog** · 07/05/2008, 18h26

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/

**plex** · 13/05/2008, 17h50

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

**SpaceFrog** · 13/05/2008, 17h55

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 ...

**plex** · 13/05/2008, 18h00

Merci pour ta réponse Spacefrog mais je suis assez ... novice en php.
Pourrais tu me donner un exemple s'il te plait ?

**SpaceFrog** · 13/05/2008, 18h02

tu as un petit bout de code ?

**plex** · 14/05/2008, 10h28

Oui biensur

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

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
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 :

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
 
<?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

**tusssss** · 14/05/2008, 10h36

Envoyé par plex

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
<?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

**plex** · 14/05/2008, 10h49

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

**SpaceFrog** · 14/05/2008, 10h53

ben

Code :

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

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

**tusssss** · 14/05/2008, 10h56

Code :

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

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.

**plex** · 14/05/2008, 10h57

Envoyé par SpaceFrog

ben

Code :

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

 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

**SpaceFrog** · 14/05/2008, 10h59

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

sinon un outer joint ON annee= ...

**tusssss** · 14/05/2008, 11h02

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 :

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

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

**plex** · 14/05/2008, 12h07

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 :

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
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 :

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
 
<?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

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

JavaScript

Discussions similaires

Partager

Partager