Discussion :

[riete]

J'ai hésité à poser ce message sur le Forum Ajax, mais il me semble plutôt orienté Javascript même s'il y a des appels Ajax dedans pas claire le type
J'ai une fonction de traitement Ajax qui est appelée en fonction de certaines actions sur des élément du formulaire (rien de bien exceptionel).

Il n'y a volontairement pas de bouton submit dans le formulaire, mais celui-ci est soumis quand l'utilisateur presse 'Entrée'.

J'aimerais que quand l'utilisateur presse 'Entrée' la fonction my_Ajax(this) soit appelée, mais que le la page ne se rafraichisse pas, pour éviter le traffic et aussi éviter la perte de temps au niveau du navigateur.
Voici le code de déclaration du formulaire.

Code :

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

<form onSubmit="return  my_Ajax(this);" name=5 method="">

Merci

[E.Bzz]

Bonjour,
quel est le résultat actuellement ?

A+

[SpaceFrog]

Code :

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

<form onsubmit="my_Ajax(this);return false;" name=5 method="">

à priori tu te sert juste du form pour lancer l'ajax ?
a quoi te sert le return ??

la majuscule c'est pour la décoration ?

[riete]

quel est le résultat actuellement ?

Actuellement, en appuyant sur la touche 'Entrée', le formulaire est envoyé au serveur et la page rafréchie. Je voudrais quand seulement la fonction qui fait le traitement Ajax soit invoquée.

[SpaceFrog]

tu as testé mon code ??

[riete]

à priori tu te sert juste du form pour lancer l'ajax ?

C'est exact. Y a t il un problème à celà? je suis un bleu en Ajax (même si Ajax lave plus blanc ).

a quoi te sert le return ??

A priori à rien. C'est une erreur car la fonction ne retourne rien.

la majuscule c'est pour la décoration ?

Peut être des reliques ou des réminissances d'autres langages.

Code :

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

<form onsubmit="my_Ajax(this);" name=5 method="">

J'ai essayé cela, la page est toujours rafraichie. Faut il que j'aille jusqu'à gérer l'enfoncement de la touche 'Entrée'?

[SpaceFrog]

y'avait pas un return false dans mon code après ????

Code :

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

<form onsubmit="my_Ajax(this);return false;" name=5 method="">

[riete]

Ohhhhh, ne gueule pas comme ça Man.
J'allai te répondre, j'ai bien testé ton code, mais le résultat est le même, la page est soumise quand même

Code :

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

<form onsubmit="my_Ajax(this);return false;" name=5 method="">

[riete]

Je vais encore me faire taper dessus. Mais je ne comprends pas en quoi le

return false;

changerait quelque chose?

[SpaceFrog]

En fait le return false bloque la soumission du form ...
mais à priori c'est le fait de ne pas avoir de bouton submit qui pose problème ...

Il te faut soit en mettre un en stye visibility hidden soit passer par l'action :

Code :

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

action="javascript: my_Ajax(this);"

et virer le onsubmit

[riete]

En fait le return false bloque la soumission du form ...
mais à priori c'est le fait de ne pas avoir de bouton submit qui pose problème ...

Il te faut soit en mettre un en stye visibility hidden soit passer par l'action :

Code :

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

action="javascript: my_Ajax(this);"

et virer le onsubmit

Je comprends très bien ce que tu veux dire. Pour uun autodidacte comme moi, c'est bien parfois d'avoir une explication claire. Sinon tu rame dans la semoule très longtemps. Merci pour ton aide précieuse.

J'ai testé ce code qui fonctionne à merveille.

Code :

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

<form onSubmit="return false;" name=5 method="javascript: my_Ajax(this);">

car si je vire purement et simplement le Submit comme-ci

Code :

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

<form name=5 method="javascript: my_Ajax(this);">

Ca ne fonctionne plus.

[E.Bzz]

Alors sans crier : ne pas confondre action et method

A+

[riete]

Alors sans crier : ne pas confondre action et method
A+

Alors là c'est excellent je n'en crois pas mes yeux. Non seulement je suis un gros naze (ce que tu me fais comprendre très gentilement d'ailleurs ) Mais en plus le mystère (pour moi) rets complet. Je m'explique.
Avec ceci:

Code :

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

<form onSubmit="return false;" name=5 method="javascript: my_Ajax(this);">

Tout fonctionne.
Alors qu'avec celà:

Code :

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

<form name=5 action="javascript: my_Ajax(this);">

Celà ne fonctionne pas.
Car l'objet XMLHttpRequest() ne me retourne pas readyState = 4.

Bon pour le moment, je m'en sort en passant avec method, mais si vous avez une explication du pourquoi l'absence de réponse, je suis preneur.
Merci

[riete]

!! ATTENTION !!
Au cas ou quelqu'un serait susceptible de vouloir s'inspirer des codes ci-dessus, il me parait important d'apporter une précision.

Malgré l'aide qui m'a été apportée et malgré mes efforts, je ne suis pas parvenu à mon objectif. En effet quelque soit la méthode adoptée, soit le formulaire est transmis, soit il ne l'est pas et les variables DOM de celui-ci ne le sont pas non plus aux code de traitement Ajax.

Pour le moment, je me contenterai d'un formulaire soumis par la touche 'entrée' et d'uun traitement Ajax quand l'utilisateur change de zone de saisie.

[sachav]

Et en placant le "return false" avant , comme cela :

Code :

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

1
2
3
 
<form onsubmit="return false;my_Ajax(this)"name=5 method="">

[SpaceFrog]

mouarf !!
la fonction ne sera pas exécutée ...


Mais bon juste par acquis de conscience peux tu nous rappeler le deroulement souhaité parceque j'ai comme un doute là ...

[riete]

Et en placant le "return false" avant , comme cela :

Code :

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

<form onsubmit="return false;my_Ajax(this)"name=5 method="">

Je te remercie pour ta suggestion, mais le formulaire n'est plus soumis
Veux tu que je dépose l'extrait pertinant de mon code JS ainsi que le code HTML produit par php pour que tu puisse me donner ton avis?

[SpaceFrog]

Si je récapitule :

Tu veux envoyer une requete ajax ...
Sans recharger la page OK ...

pourquoi avec un formulaire ?
Que vient faire le formulaire là dedans ??

[riete]

Bon, pour essayé d'aboutir, je dépose mon code.
L'objectif est double, en effet tant qu'a faire du uwèb "riche", je voulais traité la saisie de 3 façons.
1/ substitution des boutons de validation par le traitement des actions

2/ Quand l'utilisateur appuye sur 'Entrée' depuis un champ <input type=text>les données de la zone du formulaire concerné sont envoyées sans que la page soit rafraichie (d'où l'utilisation d'Ajax). Le problème est ici

3/ Quand l'utilisateur change de zone la même fonction est appelée

Code JS

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
// Traitement des actions Ajax
		function my_Ajax(obj){
			var req = null;
			var status = document.getElementById("status");
 
			status.innerHTML = "Lancement...";
 
			if(window.XMLHttpRequest)
				req = new XMLHttpRequest(); 
			else if (window.ActiveXObject)
				req  = new ActiveXObject(Microsoft.XMLHTTP); 
 
			req.onreadystatechange = function()
			{ 
				status.innerHTML = "Attente du serveur...";
				if(req.readyState == 4)
				{
					// Test si bonne reception
					if(req.status == 200)
					{
						obj.elements[2].value= "" + req.responseText;// Reception
 
						// Operation terminee avec succes
						status.innerHTML = "Action terminée - Attente nouvelle action...";
					}	
					else	
					{
						status.innerHTML = "Erreur: code " + req.status + " " + req.statusText;
					}	
				} 
			};
 
			req.open("POST", "Ajax_Modif_Planning.php", true);
			req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
			// Definition des variable
			var data =  obj.elements[0].name + "=" + obj.elements[0].value;
			data += "&" + obj.elements[1].name + "=" + obj.elements[1].value;
			data += "&" + obj.elements[2].name + "=" + obj.elements[2].value;
 
			req.send(data);
 
			// Changement de couleur en fin d'action pour signifier que fait!
			document.getElementById(obj.elements[3].value).className = "tdname";
 
			return false;
		}
 
		// Changement de couleur
		function Change_BG(obj){
			obj.className = "getinput";
		}
 
		// Perte ou Pas le de focus
		function Blur_CH(obj){
			obj.className = "input";
		}

Un des formulaires généré par php

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
<form onSubmit="my_Ajax(this);" name=9 method=""><tr>
<td class=tdname>Legol Jojo</td>
<td class=tdname noWrap><select name="9-Rea_Type_Activite" ONCHANGE="my_Ajax(this.form)">
<option selected value=T>T</option>
<option value=N>N</option>
<option value=C>C</option>
<option value=A>A</option>
 
<option value=R>R</option>
</select><select name="10-Rea_Type_Activite" ONCHANGE="my_Ajax(this.form)">
<option selected value=T>T</option>
<option value=N>N</option>
<option value=C>C</option>
<option value=A>A</option>
<option value=R>R</option>
</select></td>
<td class=tdname><input type=text size=30 name=9-Observation value="En transit" ONFOCUS="Change_BG(this);" ONBLUR="Blur_CH(this); my_Ajax(this.form)"></td>
<input type=hidden name=IDP value=9></tr>
</form>

Voilà tout est là.

[E.Bzz]

Pas de raison que ça ne fonctionne pas, en ajoutant un input type="submit" (ou type="image", même effet mais plus facile à masquer ) et

Code :

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

<form onSubmit="my_Ajax(this);return false;" name="9" action="#">

Enfin, si : une raison quand même : ne pas imbriquer de <form> entre les <tr> de la <table> =>

Code :

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

1
2
3
4
5
<form>
<table>
...
</table>
</form>

A+