Discussion :

[deepuser]

Bonjour a tous,

Voila mon projet: je dois faire un formulaire avec différents combobox qui seront dynamique c'est à dire que suivant le choix fait dans la première combobox les autres auront un contenu different, tout ceci raccodé à une base de données.

auriez vous des pistes que je pourrais exploiter car je fouille sur le net et rien de bien précis

[Phiss]

Salut,

je dois faire un formulaire avec différents combobox qui seront dynamique c'est à dire que suivant le choix fait dans la première combobox les autres auront un contenu different, tout ceci raccodé à une base de données.
auriez vous des pistes que je pourrais exploiter car je fouille sur le net et rien de bien précis

Cela va dépendre du nombre de données que tu auras dans ta base de données.
Si tu en as peut tu peux mettre toutes tes données dans le page et les gérer en javascript.

si tu en as beaucoup, tu peux essayer de faire un rafraichissement de la page en passant des paramètres dans un formulaire.

[deepuser]

Merci mais j'ai beaucoup de données à gérer ( base de véhicules)
et j'aimerai tout faire dans la meme page sans rafraichir ( sinon le client va abandonner si il y a trop de page à valider

comment faire?

[Phiss]

je parlais de rafraichir pas de passer sur une autre page par validation de formulaire.

Exemple:
tu as ta première liste avec ta marque de voiture
lorsque tu sélectionne un marque tu appelles la fonction onchange() et grace à cette fonction tu appelles une fonction qui appelle la même page en passant en paramètres le id de ta marque.
et lorsque tu ré affiche ta page tu as donc ce paramètre qui te permet de remplir la liste d'après qui pourrait être le nom de la voiture.
tu n'as qu'à tester tes paramètres a chaque affichage en quelques sorte.

je ne sais pas si je suis clair?

Si tu ne m'as pas compris j'essayerais d'être plus clair.

[deepuser]

je parlais de rafraichir pas de passer sur une autre page par validation de formulaire.

Exemple:
tu as ta première liste avec ta marque de voiture
lorsque tu sélectionne un marque tu appelles la fonction onchange() et grace à cette fonction tu appelles une fonction qui appelle la même page en passant en paramètres le id de ta marque.
et lorsque tu ré affiche ta page tu as donc ce paramètre qui te permet de remplir la liste d'après qui pourrait être le nom de la voiture.
tu n'as qu'à tester tes paramètres a chaque affichage en quelques sorte.

je ne sais pas si je suis clair?

Si tu ne m'as pas compris j'essayerais d'être plus clair.

j'ai bien compris le systeme mais tu peux développer un peu le onchange() car je connais pas ( c'est bien du ASP?)
quand à l'AJAX c'est un peu trop compliqué pour moi et en plus ma base de donnees grossit régulièrement

[Phiss]

le onchange c'est un paramètre des

Code :

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

<select onchange="">

cela permet d'effectuer une action lorsque l'on agit sur cette sélection.

Donc le principe c'est que lorsque tu agit sur une sélection tu appelles une fonction en javascript.
cette fonction va chercher les infos actuelles et les renvois dans une autre page. Le truc c'est que moi je rappelle la même page.

du genre ta page s'appelle test.asp

au début tu créé une fonction

Code :

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

1
2
3
4
5
6
7
8
function marque_change(choix)
{   
	window.location= "test.asp?m="+choix;
}
function categorie_change(cat,choix)
{   
	window.location= "test.asp?c="+cat+"&m="+choix;
}

ensuite dans tes select tu mets

Code :

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

<select name='marque' onChange='javascript:marque_change(this.value)'>

et dans la seconde

Code :

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

<select name='categorie' onChange='javascript:categorie_change("& idm &",this.value)'>

avec idm le numéro relatif à la marque de la voiture.

en gros un exemple complet avec acces à la base

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
response.Write(vbcrlf&"<table border = 0 width='100%'><tr><td>Choisir une marque</td><td>")
	response.Write(vbcrlf&"<select name='marque' onChange='javascript:marque_change(this.value)'>")
 
	requete = "select * from marque order by nom"
	set rs = ObjConnexion.execute(requete)
	if not rs.eof then
  'idm est le paramètre récupéré dans l'url par un request.querystring("m")
		if idm = 0 then
			idm = rs("id_marque")
		end if
		do while not rs.eof 
			if int(id) = rs("id_marque") then
				response.Write(vbcrlf&"<option value='"&rs("id_marque")&"' selected>"&rs("nom") &"</option>")
			else
				response.Write(vbcrlf&"<option value='"&rs("id_marque")&"'>"&rs("nom") &"</option>")
			end if
			rs.movenext
		loop 
	end if
	rs.close
	set rs = nothing
 
	response.Write(vbcrlf&"</select>")
	response.Write(vbcrlf&"</tD><td>Choisir une categorie</td><td>")
	response.Write(vbcrlf&"<select name='categorie' onChange='javascript:categorie_change("& idm &",this.value)'>")
 
	requete = "select * from categorie where id_categorie = "& idm &"  order by nom"
	set rsf = ObjConnexion.execute(requete)
	if not rsf.eof then
' idf  idem idm sauf que la c'est pour la categorie de la voiture
		if idf = 0 then
			idf = rsf("id_categorie")
		end if
		do while not rsf.eof 
			if int(idf) = rsf("id_categorie") then
				response.Write(vbcrlf&"<option value='"&rsf("id_categorie")&"' selected>"&rsf("nom") &"</option>")
			else
				response.Write(vbcrlf&"<option value='"&rsf("id_categorie")&"'>"&rsf("nom") &"</option>")
			end if
			rsf.movenext
		loop 
	end if
	rsf.close
	set rsf = nothing
 
	response.Write(vbcrlf&"</select>")
	response.Write(vbcrlf&"</tD><td>")
	response.Write(vbcrlf&"Choisir la puissance")
	response.Write(vbcrlf&"</td><td><select name='puissance'>")
	response.Write(vbcrlf&"<option value='0'>toutes</option>")
	requete = "select * from puissance where id_categorie = "& idf &" order by nom"
	set rsp = ObjConnexion.execute(requete)
	do while not rsp.eof 
		response.Write(vbcrlf&"<option value='"&rsp("id_puissance")&"'>"&rsp("nom") &"</option>")
		rsp.movenext
	loop 
	rsp.close
	set rsp = nothing
 
	response.Write(vbcrlf&"</select>")

Dans le cas présent tu as trois liste qui sont liés.
La première te mets des marques de voitures, la seconde la catégorie et la troisième la puissance.
C'est un exemple mais chez moi cela marche.

[agrotic]

bonjour,

pour mettre un jour un combo en fonction d'un autre, le tout lié à une BDD avec bcp d'enregistrements, il y a AJAX ...

voici un ex pour afficher dans un combo les communes en fonction du CP (et pré-sélectionner la bonne commune le cas échéant) - ce script permet de récupérer le code INSEE correspondant :

HTML :

Code :

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

1
2
3
<input type="text" name="PER_ADR_CP" size="5" value="" onChange="populate_PER_ADR_VILLE(document.aForm.PER_ADR_VILLE, this.value, '', 'COMMUNE');">
<select name="PER_ADR_VILLE"><option value="0">-</option></select>
<input type="hidden" name="COM_INSEE" value="">

Javascript :

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
var oXMLHttpRequest;
var CommuneField;
var CP;
var SelectedVALUE;
var XMLurl = 'getCommuneXML.asp';
if (window.XMLHttpRequest) {// branch for Netscape and FireFox
	oXMLHttpRequest = new XMLHttpRequest();
	}
else if (window.ActiveXObject) {// branch for IE
	oXMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
else {// XMLHttpRequest non supporté par le navigateur   
	alert('Votre navigateur ne permet pas de choisir la commune sur le code postal.');   
	}
 
function populate_PER_ADR_VILLE(pCommuneField, pCP, pSelectedVALUE, pValueType){
	CommuneField = pCommuneField;
	CP = pCP;
	SelectedVALUE = pSelectedVALUE;
	if(CP != ''){
		try {netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");}catch (e) {}
		var url_to_read = XMLurl + '?COM_CP=' + CP;
		//on libère l'objet XmlHttpRequest
		if (oXMLHttpRequest){oXMLHttpRequest.abort();}
		//alert(url_to_read);
		if(pValueType == 'INSEE'){oXMLHttpRequest.onreadystatechange = doComboUpdateINSEE;}
		if(pValueType == 'COMMUNE'){oXMLHttpRequest.onreadystatechange = doComboUpdateCOMMUNE;}
		oXMLHttpRequest.open("GET", url_to_read, true);
		oXMLHttpRequest.send(null);
		}
	else{
		alert('il faut un code postal...')
	}
}
 
function doComboUpdateINSEE() {
	if (oXMLHttpRequest.readyState == 4) {// only if req shows "loaded"
		if (oXMLHttpRequest.status == 200) {// only if "OK"
			upDateComboINSEE();
		}
		else {
			alert('Un problème est survenu.');
		}
	}
}
function doComboUpdateCOMMUNE() {
	if (oXMLHttpRequest.readyState == 4) {// only if req shows "loaded"
		if (oXMLHttpRequest.status == 200) {// only if "OK"
			upDateComboCOMMUNE();
		}
		else {
			alert('Un problème est survenu.');
		}
	}
}
 
function upDateComboINSEE(){
	var i = j = k = 0;
	// on efface le menu en cours
	j = CommuneField.options.length;
	while (j--){ CommuneField.options[j] = null; }
	// on lit le XML
	var oRootElement = oXMLHttpRequest.responseXML.documentElement;
	if(oRootElement.childNodes.length != 0){
		for (i = 0; i < oRootElement.childNodes.length; i++) {
			var nom_commune = oRootElement.getElementsByTagName('COMMUNE')[i].getAttribute('COM_NOM');
			var insee_commune = oRootElement.getElementsByTagName('COMMUNE')[i].getAttribute('COM_INSEE');
			//on remplit le menu déroulant
			CommuneField.options[i] = new Option(nom_commune, insee_commune, false, false);
			if(parseInt(insee_commune)==parseInt(SelectedVALUE)) { k = i; }
		}
		//on sélectionne le bon
		CommuneField.options[k].selected = true;
	}
}
 
function upDateComboCOMMUNE(){
	var i = j = k = 0;
	// on efface le menu en cours
	j = CommuneField.options.length;
	while (j--){ CommuneField.options[j] = null; }
	// on lit le XML
	var oRootElement = oXMLHttpRequest.responseXML.documentElement;
	if(oRootElement.childNodes.length != 0){
		for (i = 0; i < oRootElement.childNodes.length; i++) {
			var nom_commune = oRootElement.getElementsByTagName('COMMUNE')[i].getAttribute('COM_NOM');
			//on remplit le menu déroulant
			CommuneField.options[i] = new Option(nom_commune, nom_commune, false, false);
			if(nom_commune==SelectedVALUE) { k = i; } 
		}
		//on sélectionne le bon
		CommuneField.options[k].selected = true;
	}

format des noeuds du XML reçu (pour comprendre l'ex) :

Code :

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

<COMMUNE COM_INSEE="xxx" COM_NOM="xxx" COM_CP="xxx" />

[Phiss]

C'est vrai que j'oublie toujours les traitements par fichier xml.

Mais en même temps est ce que le fait d'avoir une base de données qui grossit régulièrement n'est pas gênant? Car si on doit à chaque fois recréer le fichier XML, cela peut être lourd.

Mais après peut être que je n'ai pas saisis le fonctionnement de la chose.

[agrotic]

ben en fait, si j'ai bien compris, il s'agit d'utiliser ça avec une BDD de références... donc un volume relativement fixe.

sinon, l'avantage du XML, c'est que ça peut encaisser pas mal de volume pour un temps de traitement relativement bon.

si ça prend vraiment du temps, il va falloir mettre en place un système pour faire patienter l'utilisateur... un truc dans ce goût là ?