valider un formulaire sans le réinitialiser

**mohcultiv** · 24/06/2008, 18h13

Bonjour,
J'ai un formulaire asp qui contient entre autres, 4 listes déroulantes à choix multiples. Le formulaire pointe sur la même page (sur lui même quoi).
J'ai une requête qui est créé par la concaténation des selections des trois premieres listes, et dont le résultat va remplir la dernière.

Pour être plus clair:
liste1=liste de département
liste2=liste de formation
liste3=liste de financeurs des formations
liste4=liste des porganismes de formations

ma liste d'organismes de formations est restreinte en fonction des choix des 3 premieres listes:

Code :

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

select libelleOrganisme from actionFormation where département in (liste1(1), liste1(2), ...) and libelleFormation in (liste2(1), liste2(2), ...) and ...

Le souci c'est que cette troisième liste n'apparait et n'est renseignée qu'après validation du formulaire, et au même moment le formulaire est réinitialisé, et donc les choix de mes utilisateurs ne sont pas sauvegardés.
Je voudrais qu'après validation les lignes de mes listes reste cochées.

J'ai voulu dans un premier temps vérifier avec les variables retournées par mon formulaire comme suit;

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
<select name="liste2" multiple size="5" style="width:250px ">
	<option value="-Tous-" selected>-Tous-</option>
	<%while not formation.eof%>
		<option value="<%=formation("LibelleFormation")%>"
		<%n=Request.QueryString("liste2").Count
			For a = 1 to n	
				if formation("LibelleFormation")=Request.QueryString("liste2")(a) then
					response.write("selected")
				end if					
			Next
		%>
		><%=formation("LibelleFormation")%>	</option>
	<%formation.movenext
	wend%>
</select>

le souci c'est que certaines de mes listes contiennent plus de milles enregistrements et ne cessent de s'agrandir, et si à chaque lignes je doit vérifier que cette derniere se trouve bien dans la liste des lignes sélectionnées... je vous raconte pas le temps d'attente. Et je vous rappel que j'ai trois listes! il suffit que l'utilisateur en sélectionne plusieurs et c'est le drame! lol!

C'est pourquoi je cherchais un moyen de valider un formulaire sans le réinitialiser, ça serait plus simple. J'ai chercher sur le net, mais j'ai rien trouvé de satisfaisant, alors si quelqu'un peut m'aider...

Merci.

**E.Bzz** · 25/06/2008, 09h50

Bonjour,

Envoyé par mohcultiv

C'est pourquoi je cherchais un moyen de valider un formulaire sans le réinitialiser, ça serait plus simple. J'ai chercher sur le net, mais j'ai rien trouvé de satisfaisant, alors si quelqu'un peut m'aider...

Pour envoyer les infos de ton form sans recharger la page, il y a Ajax ...

A+

**mohcultiv** · 26/06/2008, 15h22

Alors,...
J'ai regardé les tutoriels AJAX et en particulier un qui permetait entre autres d'éxécuter une requête sur le serveur via javascript et donc sans réinitialiser mon form.
Apparement c'est l'objet XMLHttpRequest qui permet ceci.

Perso je n'en avait jamaiss entendu parler avant hier soir et je ne connais rien à AJAX.

Cependant j'ai essayer de comprendre le tuto et j'ai fait comme suit, or rien ne se passe lorsque je clique sur mon bouton, alors avec le submit mon code fonctionnait.

voici mon code :

fonction javascript utilisant l'objet XMLHttpRequest:

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
 
function apercu(page) {
    var xhr;
    if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
    else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
    else {
        alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
        return;
    }
 
 
    var data = 'form=form3&valider=VALIDER';
	data = data + '&operateur3=' + escape(form3.operateur3.value);
	data = data + '&exctrdatedeb3=' + escape(form3.exctrdatedeb3.value);
	data = data + '&operateur33=' + escape(form3.operateur33.value);
	data = data + '&exctrdatedeb33=' + escape(form3.exctrdatedeb33.value);
	data = data + '&refusConv=' + escape(form3.refusConv.value);
 
	var selectBox = document.form3.selectGeo;
	for (var i=0; i<selectBox.options.length; i++) {
		if (selectBox.options[i].selected) {
			data = data + '&selectGeo=' + escape(selectBox.options[i].text);
		}		
	}
 
	var selectBox = document.form3.selectForm;
	for (var i=0; i<selectBox.options.length; i++) {
		if (selectBox.options[i].selected) {
			data = data + '&selectForm=' + escape(selectBox.options[i].text);
		}		
	}
 
	var selectBox = document.form3.selectFin;
	for (var i=0; i<selectBox.options.length; i++) {
		if (selectBox.options[i].selected) {
			data = data + '&selectFin=' + escape(selectBox.options[i].text);
		}		
	}
	page= page + '?' + data + ieTrick();
	alert(page);
	xhr.open('GET',page,true);    
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
 
    xhr.send(null);	
}

bouton permettant de valider le formulaire :

Code :

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

<input type="button" name="valider" value="VALIDER" onClick="apercu('extraction2.asp');">

et je récupère mes variables coté asp comme si j'avais fait un submit, c'est à dire: Request.QueryString("maVariable")

merci encore

**E.Bzz** · 26/06/2008, 15h37

Bonjour,
problème de syntaxe apparemment :

Code :

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

form3.operateur3.value

==>

Code :

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

document.forms['form3'].elements['operateur3'].value

Pareil pour la suite du code, bien sûr ...

A+

**Bovino** · 26/06/2008, 15h41

Plus sérieusement, tu sembles bien envoyer ta requête, mais le but est d'exploiter la valeur de retour...
Si tu as bien lu les tutos, tu dois te souvenir qu'à un moment, il était question d'un truc du genre :

Code :

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

xhr.onreadystatechange = une_fonction();

puis

Code :

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

1
2
3
4
5
une_fonction(){
if(xhr.readyState == 4 && xhr.status == 200){
//traitement du xhr.responseText ou xhr.responseXML
}
}

toute cette partie semble manquer dans ton code...

EDIT
E.Bzz +1

**mohcultiv** · 26/06/2008, 15h54

oui effectivement, j'ai délibérément laisser cette partie car dans le tuto que j'ai lu, on s'en servait simplement pour réinitialiser des input ou des variables...
Et les résultats obtenu par réponse du serveur était recueilli dans une page php par $GET[].

J'ai donc adapter cele en asp.

Ceci dit, j'ai effectivement lu dans un autre tuto un truc du genre de :

Code :

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

1
2
3
if(xhr.readyState == 4 && xhr.status == 200){
//traitement du xhr.responseText ou xhr.responseXML
}

mais je n'ai pas compris à quoi cela servait exactement et comment je pouvais l'utiliser dans mon exemple, sachant que mon but est simplement de valider mon form sans le réinitialiser.

J'ai essayer de faire un alert(xhr.responseText), mais il me retourne le code de la page d'erreur "impossible d'ouvrir la page" dans une fenête js.

**Bovino** · 26/06/2008, 16h04

J'ai essayer de faire un alert(xhr.responseText), mais il me retourne le code de la page d'erreur "impossible d'ouvrir la page" dans une fenête js.

Cela montre que la requête est bien envoyée (donc à priori pas de souci coté javascript) mais qu'il ne trouve pas la page asp à l'endroit que tu lui as indiqué sur le serveur...

**mohcultiv** · 26/06/2008, 16h16

Pourtant ma page est bien là ou elle devrait être et lorsque je passe par un submit pas de pb.

Cependant il ya une différence entre mon code et le tuto, c'est que j'ai tout mes codes sur une seule page (asp/js/html) alors que dans le tuto il ya différentes pages, est ce que tu crois que cela peut venir de là?

Perso je ne vois pas pourquoi mais bon?

**E.Bzz** · 26/06/2008, 16h22

Ta page doit faire une action sur le serveur (maj BDD ou autre). Cette action est-elle réalisée ?
Tu ne peux pas le savoir autrement, puisqu'effectivement tu ne traites pas la réponse de ton appel Ajax.
Par la suite, il serait quand même bon de récupérer cette réponse, ne serait-ce que pour informer l'utilisateur du bon déroulement (en tous cas de l'échec éventuel) ...

A+

**Bovino** · 26/06/2008, 17h15

Envoyé par mohcultiv

Cependant il ya une différence entre mon code et le tuto, c'est que j'ai tout mes codes sur une seule page (asp/js/html) alors que dans le tuto il ya différentes pages, est ce que tu crois que cela peut venir de là?

Non, ce n'est effectivement pas ça...
Une question bête, mais ton serveur accepte l'asp ?

**E.Bzz** · 26/06/2008, 17h22

Envoyé par Bovino

Non, ce n'est effectivement pas ça...
Une question bête, mais ton serveur accepte l'asp ?

Oui :

Envoyé par mohcultiv

Pourtant ma page est bien là ou elle devrait être et lorsque je passe par un submit pas de pb.

A+

**Bovino** · 26/06/2008, 17h52

Oui... et si j'avais regardé le premier post, j'aurai vu que la page d'appel est elle aussi en asp

Ceci dit, pour qu'il ai une erreur

alert(xhr.responseText), mais il me retourne le code de la page d'erreur "impossible d'ouvrir la page" dans une fenête js.

pour moi, les raisons les plus fréquentes, c'est :
-> Le serveur n'accepte pas le langage
-> Il appelle une page hors de son domaine...

Apparemment, pour lui c'est autre chose

**E.Bzz** · 26/06/2008, 18h02

Envoyé par Bovino

Apparemment, pour lui c'est autre chose

Oui, et je pense même que ça ne vient pas d'Ajax, car le "404" serait retournée dans la réponse d'Ajax. Or, elle n'est pas traitée

Ce messahe est plutôt un appel classique (via <A href>, submit d'un form ou modif du location.href)

Tiens, d'ailleurs, en l'écrivant :
@ mohcultiv : tu as bien enlever le submit, puisque tu fais maintenant ça par Ajax ?

A+

**mohcultiv** · 27/06/2008, 08h32

Désolé d'avoir mis tant de temps à répondre mais oui j'ai bien enlevé le submit.

pour moi, les raisons les plus fréquentes, c'est :
-> Le serveur n'accepte pas le langage
-> Il appelle une page hors de son domaine...

Apparemment, pour lui c'est autre chose

Effectivement c'est autre chose...

Ta page doit faire une action sur le serveur (maj BDD ou autre). Cette action est-elle réalisée ?

Je fais simplement un select, mais coté ASP : Le but est simplement de restreindre une liste en fonction des éléments d'autres listes sans recharger la page, donc à part le select,^pas d'action dans ma bdd.

Tu ne peux pas le savoir autrement, puisqu'effectivement tu ne traites pas la réponse de ton appel Ajax.
Par la suite, il serait quand même bon de récupérer cette réponse, ne serait-ce que pour informer l'utilisateur du bon déroulement (en tous cas de l'échec éventuel) ...

Je veux bien mais quel est la réponse que je dois avoir, c'est ce passage des tutos qui est encore flou chez moi. Quel type de réponse le serveur doit il me retourner? Et comment la traiter dans mon cas?

**E.Bzz** · 27/06/2008, 09h41

Envoyé par mohcultiv

Je veux bien mais quel est la réponse que je dois avoir,

Si tu ne fais qu'un select, c'est bien pour en récupérer le résultat dans la page, non ? (ça ne serait pas forcément le cas si c'était un update ou delete, par exemple).
Il faut donc récupérer dans le xhr.responseText les valeurs retournées par le select, pour les utiliser comme filtre de ta liste.
Pour ça, il faut que ta page PHP fasse un "echo" de ses valeurs.
C'est ce qui est fait dans les tutos : regarde de nouveau, tu verras le lien avec ton cas

A+

**mohcultiv** · 27/06/2008, 10h35

Envoyé par E.Bzz

Pour ça, il faut que ta page PHP fasse un "echo" de ses valeurs.
C'est ce qui est fait dans les tutos : regarde de nouveau, tu verras le lien avec ton cas

Suis vraiment désole, comme je l'ai dis je suis débutant sur AJAX (et encore c'est flateur pour moi).
Mais on ne doit pas parler du même tuto (Modification "inline" de données avec AJAX ), parce que dans le mien, il ny a aucun xhr.responseText et les variables sont récupérées comme si on faisait un sublmit:

$_GET['valeur']... dans le php

De même j'exécute ma requête coté ASP :

Code :

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

select * from table where champs in (" & Request.QueryString("liste")(1) & "," & Request.QueryString("liste")(2) & ")"

Je sais pas mais dans le tuto que j'ai vu il faisait comme ça sauf que c'était un update au lieu d'un select...

**Bovino** · 27/06/2008, 11h04

Tu n'as pas besoin de responseText pour traiter les informations sur ta page asp, en revanche, si tu veux utiliser ce traitement sur ta page, il n'y a que deux solutions : soit la rafraîchir (ce qui est plutôt absurde avec Ajax...), soit ta page asp retourne un résultat et là tu es obligé de récupérer le responseText (ou xml...) pour l'utiliser.

EDIT

Je sais pas mais dans le tuto que j'ai vu il faisait comme ça sauf que c'était un update au lieu d'un select...

effectivement, il peut arriver que tu n'aies qu'à mettre à jour ta bdd et dans ce cas, tu n'as pas forcément la nécessité de récupérer de réponse du serveur, mais comme on te l'as déjà dit, il est tout de même préférable d'avertir que tout s'est bien passé.

**mohcultiv** · 27/06/2008, 11h17

Ah ok je crois comprendre, en fait le responseText devrait me retourner le résultat de ma requête select, et nom les variables mis en paramètre?

Si tel est le cas comment dois-je utiliser le responseText?

**Bovino** · 27/06/2008, 11h37

Envoyé par mohcultiv

Ah ok je crois comprendre, en fait le responseText devrait me retourner le résultat de ma requête select

Plus exactement, responseText renvoie le résultat de l'exécution de ta page asp, la nuance : il ne suffit pas de faire la requête, il faut aussi l'afficher, d'où

Pour ça, il faut que ta page asp fasse un "echo" de ses valeurs.

Ensuite, le responseText est ce que te retournes le serveur, il est accessible en javascript dès que les codes serveur correspondants (readyState == 4, status == 200), à toi ensuite de créer une fonction javascript qui dès qu'elle reçoit ces codes, utilisera le responseText pour mettre à jour la page.