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.

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

[Phiss]

C'est vrai que dans le cas présent, si j'ai compris, cela doit pas trop bouger.

Mais je voyais ça un peu pour mon cas. J'aurais peut être la possibilités de passer par ce genre de scripts. Mais vu que ma base change régulièrement j'ai peut de surcharger niveau fichier.

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

[deepuser]

merci pour toutes tes infos je vais bucher cela et je te tiendrais au courant.

mais juste une question : les fonctions javascript je les mets ou dans le code ( dans le head, body?) et je mets paspas de truc du style <script LANGUAGE="JavaScript">ma fonction ()</script> ?

Encore merci ( meme si j'ai vraiment du mal avec javascript)

[Phiss]

si bien sur les fonctions javascript sont entourées des balises <script>
Et moi je les mets dans le header.

[deepuser]

je te remercie car mes premiers essais marchent à merveille ( pour l'instant rien de bien compliqué)
je continue de creuser et maintenant j'essaie de faire la même chose en me connectant la bdd

[deepuser]

j'ai super bien avancé mais j'ai encore quelques soucis:

Comment passer 2 variables dans la deuxieme fonction , je m'explique, tu me dit :
<select name='categorie' onChange='javascript:categorie_change("& idm &",this.value)'>

(où this.value représente la variable de la premiere fonction =>ça cela marche), moi je veux passer une deuxieme variable à ma fonction et non pas un "& idm &", je veux envoyer encore une variable de type this.value, comment la déclarer proprement

J'espere que je suis assez clair ( car en fait je vais avoir au moins 4 fonctions qui vont etre reliées)

En fait ce que j'arrive pas à faire c'est récupérer une valeur asp et pouvoir l'envoyer dans la fonction

[agrotic]

bonjour,

je pense justement que le 'idm' dont tu parles correspond à une valeur récupérée en ASP suite à un

Code :

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

idm=request("id_marque")

Nicolas.

[deepuser]

merci ça j'avais compris mais quand je récupère la valeur pour la mettre dans le onchange("&idm&") par exemple, cela me renvoie réellement &idm& et non pas la valeur qui lui est associé

[agrotic]

vi, ça dépend de la façon dont tu écris le HTML :

Code :

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

1
2
<% idm = request("idmarque") %>
<select name=".." onchange="categorie_change(<%= idm %>,this.value)"> ...</select>

ou bien

Code :

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

1
2
3
4
5
6
7
8
<%
idm = request("idmarque") 
...
response.write "<select name='..' onchange='categorie_change(" & idm & ",this.value)'>"
 ...
response.write "</select>"
...
%>

Nico.

[deepuser]

mais bien sur!
j'avais pas pensé à cela
vraiment des fois on bute sur de détails alors que la reponse est evidente
<% idm = request("idmarque") %>
<select name=".." onchange="categorie_change(<%= idm %>,this.value)"> ...</select>

je ferais mes essai et je vous tiendrais au courant

[deepuser]

Merci a tous tout marche nickel ( en tout cas pour cette premiere etape)
Je clos le sujet . Encore merci