[DOM] Eviter Submit() sur return

Version imprimable

06/02/2008, 10h22
riete

[DOM] Eviter Submit() sur return

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

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

Merci
06/02/2008, 10h28
E.Bzz

Bonjour,
quel est le résultat actuellement ?

A+
06/02/2008, 10h31
SpaceFrog

Code:

<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 ? :mouarf:
06/02/2008, 11h05
riete

Citation:

Envoyé par E.Bzz

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.
06/02/2008, 11h06
SpaceFrog

tu as testé mon code ??
06/02/2008, 11h14
riete

Citation:

Envoyé par SpaceFrog

à 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 :mouarf:).

Citation:

Envoyé par SpaceFrog

a quoi te sert le return ??

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

Citation:

Envoyé par SpaceFrog

la majuscule c'est pour la décoration ? :mouarf:

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

Code:

<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'?
06/02/2008, 11h15
SpaceFrog

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

Code:

<form onsubmit="my_Ajax(this);return false;" name=5 method="">
06/02/2008, 11h18
riete

Ohhhhh, ne gueule pas comme ça Man.:aie:
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:

<form onsubmit="my_Ajax(this);return false;" name=5 method="">
06/02/2008, 11h21
riete

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

Citation:

return false;

changerait quelque chose?
06/02/2008, 11h24
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:

action="javascript: my_Ajax(this);"

et virer le onsubmit
06/02/2008, 11h35
riete

Citation:

Envoyé par 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:

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:

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

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

Code:

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

Ca ne fonctionne plus.
06/02/2008, 11h47
E.Bzz

Alors sans crier : ne pas confondre action et method ;)

A+
06/02/2008, 15h06
riete

Citation:

Envoyé par E.Bzz

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

Alors là c'est excellent 8O 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:

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

Tout fonctionne.
Alors qu'avec celà:

Code:

<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
07/02/2008, 17h56
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.
07/02/2008, 19h35
sachav
Et en placant le "return false" avant , comme cela :
Code:

1 2 3 <form onsubmit="return false;my_Ajax(this)"name=5 method="">
07/02/2008, 20h07
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à ...
08/02/2008, 09h33
riete

Citation:

Envoyé par sachav

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

Code:

<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?
08/02/2008, 11h21
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 ??

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:

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:

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

08/02/2008, 15h26
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:

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

1 2 3 4 5 <form> <table> ... </table> </form>
A+
08/02/2008, 15h40
SpaceFrog

ou comme dit plus haut un input type="submit" en visibility:hidden ...
08/02/2008, 16h03
E.Bzz

Citation:

Envoyé par SpaceFrog

ou comme dit plus haut un input type="submit" en visibility:hidden ...

J'étais pas sûr qu'il récupère le Enter :oops:

Code:

1
2
3
4
<form action="javascript:alert('envoyé')" onsubmit="alert('on submit')" >
<input type='text' />
<input type='submit' style="visibility:hidden;" />
</form>

Code:

1
2
3
4
<form action="javascript:alert('envoyé')" onsubmit="alert('on submit');return false" >
<input type='text' />
<input type='submit' style="visibility:hidden;" />
</form>

autrement dit si dans le onsubmit tu appelles ta fonction ajax il n'y a pas de raison que cela ne fonctionne pas

11/02/2008, 17h55
riete
:yaisse2:
L'accouchement s'est fait dans la douleur, mais l'enfant se porte bien.
Le code valide pour ce qui le souhaite est:
Code:

1 2 <form onsubmit="my_Ajax(this); return false;" action="#"> <input type='submit' style="visibility:hidden;" />
Merci pour votre aide.

Riete
11/02/2008, 18h02
riete
Citation:
Envoyé par E.Bzz

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

Code:

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

Pour info, j'ai testé la position du formulaire dans plusieurs positions.
Il n'y a pas d'incidence sur le mécanisme de traitement DOM.
Par contre comme d'habitude, il y a des surprises au niveau de la présentation.
Heureusement d'ailleurs que la position "sous" la balise TABLE ne cause pas de sous car j'ai envie 60 formulaires dans 60 TD 8O
11/02/2008, 18h41
SpaceFrog

Code:

action="#"

pas sur que ça ne fasse pas hurler un ou deux browser ..
IE risque de recharger la page ...

J'aurais préféré voir un truc du genre

Code:

action="javascript:void(0);"
12/02/2008, 09h10
riete

Code:

action="#"

J'avoue umblement ne pas connaître la signification du signe '#' dans ce cas comme dans href d'ailleurs?

Citation:

Envoyé par SpaceFrog

pas sur que ça ne fasse pas hurler un ou deux browser ..
IE risque de recharger la page ...

Tant que ce n'est pas toi qui hurle :aie: :lol:

Citation:

Envoyé par SpaceFrog

J'aurais préféré voir un truc du genre

Code:

action="javascript:void(0);"

Ok, j'ai pris note, j'ai modifié.
Merci
12/02/2008, 09h41
SpaceFrog

#ancre designe une ancre ...
le fait de mettre le # tout seul est comprois par les navigateur comme un retour en haut de page sur la même page.

avec la syntaxe suivante:

Code:

<a href="#monancre> aller à ... </a>

certains navigateurs font juste un scroll jusqu'à l'ancre, dautre rechargent la page et scrollent ...

si tu mets # tout seul tu risques un rechargement de page sur certains navigateurs ...
14/02/2008, 11h46
riete

Je ne me souvenais plus de cette fonction d'ancre dans une page HTML. Il faut dire que c'est de moins en moins utilisé!
Par contre merci pour le coup du rechargement. Je ne savais pas et ceci donne surement un explication à certain rechargement intempestif qu'il m'arrive de ne pas pouvoir expliquer.
14/02/2008, 11h56
E.Bzz

Citation:

Envoyé par riete

Je ne me souvenais plus de cette fonction d'ancre dans une page HTML. Il faut dire que c'est de moins en moins utilisé!

8O

C'est un fonctionnement de base de l'HTML, je dirais même fondateur : c'est quasiment le "M" de HTML ;)

Et toujours aussi utilisé, donc !
Par exemple quand tu cliques sur une discussion (colonne "Dernier message") et que, oh miracle !!, tu te retrouves sur le dernier message et non en haut de la page :mrgreen:
EDIT : tu remarqueras le "#postXXXXXX" à la fin de l'url dans la barre d'adresse

A+
14/02/2008, 14h11
riete

Citation:

Envoyé par E.Bzz

8O

C'est un fonctionnement de base de l'HTML, je dirais même fondateur : c'est quasiment le "M" de HTML ;)

Bon OK :oops: J'ai encore perdu une occasion de fermer ma :aie:
J'aurais du dire "une fonction que j'utilise de moins en moins. ;)